FormData的主要用處及實(shí)例用法介紹

本篇內容主要講解“FormData的主要用處及實(shí)例用法介紹”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強。下面就讓小編來(lái)帶大家學(xué)習“FormData的主要用處及實(shí)例用法介紹”吧!

我們打印這個(gè)構造函數看一眼

? 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]

通過(guò)打印并查看formData的結構，可以發(fā)現該接口對象本身非常簡(jiǎn)單。在formData構造函數原型對象上只有append、forEach、keys等少數方法。

FormData的主要用處

網(wǎng)絡(luò )請求中處理表單數據 網(wǎng)絡(luò )請求中處理用來(lái)異步的上傳文件

FormData 實(shí)例的創(chuàng )建

◆ new FormData ( HTMLFormElement: ele)

在使用FormData構造函數創(chuàng )建實(shí)例對象的時(shí)候，可以傳遞一個(gè)HTML表單元素，該表單元素允許是任何形式的表單控件，包括文件輸入框、復選框等。

<form name="formTest">

    <input type="text" placeholder="請輸入用戶(hù)名" name="user" value="wendingding">

    <input type="password" placeholder="請輸入密碼" name="pass" value="123456789"></form>

//列出創(chuàng )建formData實(shí)例對象的幾種方式//001 通過(guò)構造函數創(chuàng )建不傳遞任務(wù)參數var formData1 = new FormData();   //空的實(shí)例對象//通過(guò)調用對象的方法來(lái)設置數據(模擬表單)//設置數據formData1.set("name","文頂頂");formData1.set("email","wendingding_ios@126.com");formData1.set("friends","熊大");

    //設置數據(追加)formData1.append("friends","光頭強");formData1.append("friends","蘿卜頭");

    //查看實(shí)例數據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屬性才能獲取其數據

說(shuō)明： 在上面的示例代碼中介紹了兩種創(chuàng )建(獲取)formData實(shí)例對象的方式，可以先創(chuàng )建一個(gè)空的實(shí)例對象也可以直接通過(guò)頁(yè)面中的表單標簽來(lái)進(jìn)行初始化處理。

當formData數據裝填好之后，可以直接通過(guò)ajax方法提交到端，下面給出上面代碼的執行結果。

FormData 的主要方法

如上圖所示，FormData構造函數的原型對象上面定義了一堆方法。這些方法使用方式都很簡(jiǎn)單，接下來(lái)我們通過(guò)代碼的方式簡(jiǎn)單介紹他們。

 //01 創(chuàng )建空的formData實(shí)例對象    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);

    })

代碼說(shuō)明

formData 對象的這些方法其實(shí)不用進(jìn)行過(guò)多的贅述，上面的代碼和說(shuō)明簡(jiǎn)單易懂?？傮w上來(lái)說(shuō)，它提供了一整套的操作數據的方法囊括了添加(set)、修改、查詢(xún)和刪除等操作，append方法和set方法的不同之處在于它不會(huì )覆蓋而是以數組push的方式來(lái)處理同名的數據。

formData 對象的keys()、values()和entries()方法使用類(lèi)似，調用后將得到一個(gè)Iterator類(lèi)型的迭代器對象，該對象能夠能夠調用next()方法來(lái)進(jìn)行迭代操作，打印結果中的done使用布爾類(lèi)型的值來(lái)進(jìn)行標記，如果迭代結束那么值為true。

formData 對象的forEach()接收一個(gè)回調函數參數，其中第一個(gè)參數為當前遍歷數據的value值，第二個(gè)參數為key(同數組的forEach方法一致)。如果是Ajax發(fā)送GET請求，需要通過(guò)formData的方式來(lái)提交表單數據，那么可以借助該方法來(lái)拼接查詢(xún)字符串。

FormData的典型用法這里給定如下的表單數據，然后介紹如何使用FormData來(lái)處理表單數據發(fā)送GET和POST請求。

<form name="formTest">

    <input type="text" name="user" placeholder="請輸入用戶(hù)名"><br>

    <input type="text" name="email" placeholder="請輸入郵箱"><br>

    <input type="password" name="pass" placeholder="請輸入密碼"><br>

    <input type="checkbox" name="check"> 是否勾選<br></form><button>提交表單數據</button>```<div style='background:#195;color:#fff;width:120px;text-align:center'>**GET請求**</div>

    //01 獲取頁(yè)面中的btn標簽    var oBtn = document.getElementsByTagName("button")[0];

    //02 給按鈕標簽添加點(diǎn)擊事件    oBtn.onclick = function(){

        //03 使用Ajax發(fā)送GET請求        var xhr = new XMLHttpRequest();

        xhr.open("GET","http://127.0.0.1:3000?"+getData(),true);

        xhr.send();

        xhr.onreadystatechange = function(){

            if(xhr.status >= 200 && xhr.status <=300 || xhr.status == 304)

            {

                console.log("請求成功"+xhr.responseText);

            }else{

                console.log("請求失敗"+xhr.statusText);

            }

        }

    }

    //獲取頁(yè)面中的表單數據并處理為查詢(xún)字符串    function getData(){

        var arr = [];

        var data = new FormData(document.forms.namedItem("formTest"));

        data.append("age",18);

        data.forEach(function(value,key){

            arr.push(key+"="+value);

        })

        return arr.join("&");

    }

通過(guò)上面的代碼示例可以發(fā)現，使用formData來(lái)處理表單數據發(fā)送GET請求并沒(méi)有什么優(yōu)勢，也需要通過(guò)循環(huán)來(lái)處理然后把鍵值對轉換為查詢(xún)字符串的形式拼接在URL字符串的后面。

POST請求

    //01 獲取頁(yè)面中的btn標簽    var oBtn = document.getElementsByTagName("button")[0];

    //02 給按鈕標簽添加點(diǎn)擊事件    oBtn.onclick = function(){

        //03 處理參數        //方式(1) 模擬表單數據        var data = new FormData();

        data.set("name","文頂頂");

        data.set("color","red");

        data.set("email","yangyong@520it.com");

        data.append("email","wendingding_ios@126.com");

        //方式(2) 獲取表單數據        //var data = new FormData(document.forms.namedItem("formTest"));

        //04 使用Ajax發(fā)送GET請求        var xhr = new XMLHttpRequest();

        xhr.open("POST","http://127.0.0.1:3000",true);

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.send(data);

        xhr.onreadystatechange = function(){

            if(xhr.status >= 200 && xhr.status <=300 || xhr.status == 304)

            {

                console.log("請求成功"+xhr.responseText);

            }else{

                console.log("請求失敗"+xhr.statusText);

            }

        }

    }

如果發(fā)送的是POST請求，那么提交表單數據需要通過(guò)setRequestHeader方法來(lái)設置'Content-Type', 'application/x-www-form-urlencoded'，而formData數據直接作為send方法的參數來(lái)進(jìn)行提交即可。POST請求通過(guò)formData提交給服務(wù)器端的數據，如果是Node服務(wù)器端則很難處理(同文件一樣)。formData最主要的用途其實(shí)是用來(lái)異步的進(jìn)行文件上傳。

POST請求進(jìn)行文件上傳

<form>

    <input type="text" name="user" id="userID">

    <input type="file" name="file-name" id="fileID" multiple></form><button>上傳文件</button>

    //01 獲取頁(yè)面中的btn標簽    var oBtn    = document.getElementsByTagName("button")[0];

    var oUser   = document.getElementById("userID");

    var oFileID = document.getElementById("fileID");

    //02 給按鈕標簽添加點(diǎn)擊事件    oBtn.onclick = function(){

        //03 獲取表單中的文件內容        var data = new FormData();

        data.set("user",oUser.value);

        Array.from(oFileID.files).forEach(function(file){

            data.append("fileName",file);

        })

        //04 使用Ajax發(fā)送GET請求        var xhr = new XMLHttpRequest();

        xhr.open("POST","http://127.0.0.1:5000/api",true);

        xhr.send(data);

        xhr.onreadystatechange = function(){

            if(xhr.status >= 200 && xhr.status <=300 || xhr.status == 304)

            {

                console.log("請求成功"+xhr.responseText);

            }else{

                console.log("請求失敗"+xhr.statusText);

            }

        }

    }

這里順便貼出測試文件上傳寫(xiě)的Node代碼以及文件上傳后的監聽(tīng)結果。

//備注：node文件名稱(chēng)為uploadServer.js//01 導入模塊(需先通過(guò)npm來(lái)進(jìn)行安裝)var express   =   require('express');     var multer    =   require('multer');         var body      =   require('body-parser'); var app = express();app.listen(5000);app.use(body.urlencoded( { extended: false } ));app.use(multer( { dest: './upload/' } ).any());//02 監聽(tīng)網(wǎng)絡(luò )請求并設置打印接收到的參數信息app.post('/api', function (req,res){

    res.setHeader('Access-Control-Allow-Origin', '*');

    res.send("Nice ! 上傳成功 ~ ");    console.log(req.body);      //普通POST數據    console.log(req.files);     //文件POST數據});app.use(express.static('./html/'));

代碼說(shuō)明 需要先通過(guò)npm install express multer body-parser命令在當前路徑中安裝對應的模塊。

wendingding$ node uploadServer.js

{ user: 'wen' }

[ { fieldname: 'fileName',

    originalname: 'formData.png',

    encoding: '7bit',

    mimetype: 'image/png',

    destination: './upload/',

    filename: 'f416da3b522ece9e4cc2eccd5b7a62e8',

    path: 'upload/f416da3b522ece9e4cc2eccd5b7a62e8',

    size: 50002 },

  { fieldname: 'fileName',

    originalname: 'Snip20190107_1.png',

    encoding: '7bit',

    mimetype: 'image/png',

    destination: './upload/',

    filename: '2a2dd60e217b9cc08f2cc0048a1d27ab',

    path: 'upload/2a2dd60e217b9cc08f2cc0048a1d27ab',

    size: 1309894 } ]