XHR Level2新特性-FormData对象

先来一段无情文字解释

FormData对象：是js中提供的一个新对象（构造函数）。

作用：通过键值对数据模拟表单（目的就是收集数据）。

语法：

1）情况1：没有表单，使用formdata对象来模拟一个表单出来。

2）情况2：有表单，使用formdata对象来一键收集表单数据。

注意：

formdata，表单数据对象，直接打印，看不到里面的数据的。

可以通过forEach()，遍历打印里面的数据。

1-没有表单

 // 创建空的表单数据对象
        var fd = new FormData();
        // 给表单数据对象,添加数据(键值对)
        // fd.append('名字','值')
        fd.append('bookname', '水浒传');
        fd.append('author', '老李');
        fd.append('publisher', '老李出版社');

        console.log(fd); //!!!打印看不到数据

        // 使用forEach循环打印
        fd.forEach(function (value, index) {
            console.log(value, index);
        })

2-有表单

  <form action="" id="form1">
        <input type="text" name="uname">
        <button>提交</button>
    </form>
----------------JS部分-------------------
 //获取按钮
        var btn = document.querySelector('button');
        btn.addEventListener('click', function (e) {
            // 阻止默认行为
            e.preventDefault();

            // 2-有表单
            // 获取表单和表单数据对象
            var form1 = document.querySelector('#form1');
            var fd2 = new FormData(form1);

            console.log(fd2);//!!!打印看不到数据
            // 使用forEach循环打印
            fd2.forEach(function (value, index) {
                console.log(value, index);
            })
        })