FormData对象详解,并举例说明

通过var fd= new Formata创建一个实例对象;
fd可以快速获取表单中的数据,
并以键值对的方式存储,
常用方法:
添加append
fd.append(‘键’,‘值’);

set(‘键’,‘值’)
在原有对象中添加数据,有则覆盖,无则添加

删除delete
fd.delete(‘键’’)

获取,get(‘键’),getall(‘键’)

判断是否包含数据has()
返回值为布尔类型

 <form id="form">
        姓名<input type="text" name="uname"><br>
        性别<input type="text" name="sex"><br>
        年龄<input type="text" name="age">
        <button id="btn">提交</button>
    </form>
    <script>
        var form = document.querySelector('#form');
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var fm = new FormData(form);
            console.log(fm.get('uname'));//张三
            fm.forEach((item, index) => {
                console.log(index, item);
            })
        })
    </script>

可以通过foreach遍历获取到的键与值

XML数据发送:

 var fd = new FormData(form)
      console.log(fd);
      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.escook.cn:3006/api/formdata')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }

在jquery中有serialize方法可以快速获取,不过serialize无法上传文件,而FormData可以通过append追加上传文件

注意:
使用ajax发送formdate表单数据时,需要加上这两句话:

  contentType: false, //不设置内容类型
  processData: false, //不处理数据