FormData

FormData的主要用途有两个：

1. 网络请求中处理表单数据
2. 网络请求中处理用来异步的上传文件

将XMLHTTPRequest请求发送出去

new FormData ( HTMLFormElement: ele)
**

<form name="formTest">
    <input type="text" placeholder="请输入用户名" name="user" value="wendingding">
    <input type="password" placeholder="请输入密码" name="pass" value="123456789">
</form>

//列出创建formData实例对象的几种方式
//001 通过构造函数创建不传递任务参数
var formData1 = new FormData();   //空的实例对象
//通过调用对象的方法来设置数据(模拟表单)
//设置数据
formData1.set("name","文顶顶");
formData1.set("email","wendingding_ios@126.com");
formData1.set("friends","熊大");
//设置数据(追加)
formData1.append("friends","光头强");
formData1.append("friends","萝卜头");
//查看实例数据
formData1.forEach(function(value,key){
    console.log(key,value);
})
console.log("----------------------------------");
//002 获取表单标签传递给FormData构造函数
var formData2 = new FormData(document.getElementById("formTest"))
formData2.forEach(function(value,key){
    console.log(key,value);
})

表单标签只有添加name属性才能获取数据

 //01 创建空的formData实例对象
    var data = new FormData();
    //02 设置数据(添加)
    data.set("age",18);
    data.set("name","LiuY");
    data.set("type","法师");
    data.set("address","泉水中心");
    //03 设置数据(修改和删除)
    data.set("name","MiTaoer");
    data.delete("address");
    //04 设置数据(追加)
    data.append("type","战士");
    data.append("type","辅助");
===========================================
    //05 读取数据(指定key-one)
    console.log(data.get("name"));          //MiTaoer
    console.log(data.get("type"));          //法师
    //06 读取数据(指定key-All)
    console.log(data.getAll("type"));       //["法师", "战士", "辅助"]
    //07 检查是否拥有指定的key
    console.log(data.has("age"));           //true
    console.log(data.has("email"));         //false
    //08 迭代器的基本使用(keys)
    var keyIterator = data.keys()      //获取迭代器对象
    console.log(keyIterator.next());   //{done: false, value: "age"}
    console.log(keyIterator.next());   //{done: false, value: "name"}
    console.log(keyIterator.next());   //{done: false, value: "type"}
    console.log(keyIterator.next());   //{done: false, value: "type"}
    console.log(keyIterator.next());   //{done: false, value: "type"}
    console.log(keyIterator.next());   //{done: true, value: undefined}
    console.log("___________________");
    //09 迭代器的基本使用(values)
    var valueIterator = data.values();  //获取迭代器对象
    console.log(valueIterator.next());  //{done: false, value: "18"}
    console.log(valueIterator.next());  //{done: false, value: "MiTaoer"}
    console.log(valueIterator.next());  //{done: false, value: "法师"}
    console.log(valueIterator.next());  //{done: false, value: "战士"}
    console.log(valueIterator.next());  //{done: false, value: "辅助"}
    console.log(valueIterator.next());  //{done: true, value: undefined}
    //10 迭代器的基本使用(entries)
    console.log(data.entries().next());     //{done: false, value: ["age", "18"]}
    //11 formData对象的遍历
    data.forEach(function(value,key){
        //输出结果
        // age 18
        // name MiTaoer
        // type 法师
        // type 战士
        // type 辅助
        console.log(key,value);
    })