FormData的主要用处及实例用法介绍

本篇内容主要讲解“FormData的主要用处及实例用法介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“FormData的主要用处及实例用法介绍”吧!

创新互联建站是一家集网站建设,城厢企业网站建设,城厢品牌网站建设,网站定制,城厢网站建设报价,网络营销,网络优化,城厢网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

我们打印这个构造函数看一眼

ƒ FormData()

    arguments: null

    caller: null

    length: 0

    name: "FormData"

    prototype: FormData

    append: ƒ append()

    delete: ƒ delete()

    entries: ƒ entries()

    forEach: ƒ forEach()

    get: ƒ ()

    getAll: ƒ getAll()

    has: ƒ has()

    keys: ƒ keys()

    set: ƒ ()

    values: ƒ values()

    constructor: ƒ FormData()

    Symbol(Symbol.iterator): ƒ entries()

    Symbol(Symbol.toStringTag): "FormData"

    __proto__: Object

    __proto__: ƒ ()

    [[Scopes]]: Scopes[0]

通过打印并查看formData的结构，可以发现该接口对象本身非常简单。在formData构造函数原型对象上只有append、forEach、keys等少数方法。

FormData的主要用处

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

FormData 实例的创建

◆ new FormData ( HTMLFormElement: ele)

在使用FormData构造函数创建实例对象的时候，可以传递一个HTML表单元素，该表单元素允许是任何形式的表单控件，包括文件输入框、复选框等。

="formTest">

    ="text" placeholder="请输入用户名" name="user" value="wendingding">

    ="password" placeholder="请输入密码" name="pass" value="123456789">

//列出创建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属性才能获取其数据

说明： 在上面的示例代码中介绍了两种创建(获取)formData实例对象的方式，可以先创建一个空的实例对象也可以直接通过页面中的表单标签来进行初始化处理。

当formData数据装填好之后，可以直接通过ajax方法提交到服务器端，下面给出上面代码的执行结果。

FormData 的主要方法

如上图所示，FormData构造函数的原型对象上面定义了一堆方法。这些方法使用方式都很简单，接下来我们通过代码的方式简单介绍他们。

 //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);

    })

代码说明

formData 对象的这些方法其实不用进行过多的赘述，上面的代码和说明简单易懂。总体上来说，它提供了一整套的操作数据的方法囊括了添加(set)、修改、查询和删除等操作，append方法和set方法的不同之处在于它不会覆盖而是以数组push的方式来处理同名的数据。

formData 对象的keys()、values()和entries()方法使用类似，调用后将得到一个Iterator类型的迭代器对象，该对象能够能够调用next()方法来进行迭代操作，打印结果中的done使用布尔类型的值来进行标记，如果迭代结束那么值为true。

formData 对象的forEach()接收一个回调函数参数，其中第一个参数为当前遍历数据的value值，第二个参数为key(同数组的forEach方法一致)。如果是Ajax发送GET请求，需要通过formData的方式来提交表单数据，那么可以借助该方法来拼接查询字符串。

FormData的典型用法这里给定如下的表单数据，然后介绍如何使用FormData来处理表单数据发送GET和POST请求。

="formTest">

    ="text" name="user" placeholder="请输入用户名">

    ="text" name="email" placeholder="请输入邮箱">

    ="password" name="pass" placeholder="请输入密码">

    ="checkbox" name="check"> 是否勾选
提交表单数据```='background:#195;color:#fff;width:120px;text-align:center'>**GET请求**