好久没有更新自己的博客了，回过头来已经‘人间四月天’。健哥说过：先定一个小目标。对，就先定个小目标，每周至少两篇以上的博客，才对的起这人间四月天。
　　表单操作是最常见的js数据操作了，尤其HTML5的很多属性使得表单操作更加灵活，FormData类型其实是在XMLHttpRequest2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

实例化formdata对象

  1. 创建一个空对象实例
    var formData = new FormData();

  2. 已有表单数据初始化实例
    已有html表单：

    1
    2
    3
    4
    5
    <form id="myForm" action="" method="post">
        <input type="text" name="username">用户名
        <input type="password" name="pwd">密码
        <input type="submit" value="提交" onclick="refre()">
    </form>

    js操作读取

    1
    2
    3
    4
    5
    6
    7
    8

    function refre(){
      var eform = document.getElementById("myForm");
      var myform = new FormData(eform);
      var username = myform.get("username");
      var pwd = myform.get("pwd");
      console.log(username+"|"+pwd);
    }

操作方法

  1. 获取数据（myform为实例化的formData）
    myform.get("key");
    myform.getAll("key"); //获取某个键的所有值 必须带参数否则报错

  2. 添加数据
    myform.append("key","value");

  3. 修改数据（通过set设置数据，如果存在则修改，不存在则新增该条数据）
    myform.set("key","value");

  4. 删除数据
    myform.delete("key");

  5. 查询数据（判断是否有）
    myform.has("key"); // 返回布尔值

  6. 遍历数据
    我们可以通过entries()来获取一个迭代器，然后遍历所有的数据，

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k2", "v1");

    var i = formData.entries();

    i.next(); // {done:false, value:["k1", "v1"]}
    i.next(); // {done:fase, value:["k1", "v2"]}
    i.next(); // {done:fase, value:["k2", "v1"]}
    i.next(); // {done:true, value:undefined}

可以看到返回迭代器的规则

  1. 每调用一次next()返回一条数据，数据的顺序由添加的顺序决定。
  2. 返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据。
  3. 返回的对象的value属性以数组形式存储了一对keyvalue，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回。

发送数据

我们可以通过xhr来发送数据

1
2
3
4
var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

这种方式可以来实现文件的异步上传。