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

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

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

? 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的結(jié)構(gòu)，可以發(fā)現(xiàn)該接口對(duì)象本身非常簡(jiǎn)單。在formData構(gòu)造函數(shù)原型對(duì)象上只有append、forEach、keys等少數(shù)方法。

FormData的主要用處

網(wǎng)絡(luò)請(qǐng)求中處理表單數(shù)據(jù) 網(wǎng)絡(luò)請(qǐng)求中處理用來異步的上傳文件

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

◆ new FormData ( HTMLFormElement: ele)

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

<form name="formTest">

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

    <input type="password" placeholder="請(qǐng)輸入密碼" name="pass" value="123456789"></form>

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

    //設(shè)置數(shù)據(jù)(追加)formData1.append("friends","光頭強(qiáng)");formData1.append("friends","蘿卜頭");

    //查看實(shí)例數(shù)據(jù)formData1.forEach(function(value,key){

    console.log(key,value);})console.log("----------------------------------");//002 獲取表單標(biāo)簽傳遞給FormData構(gòu)造函數(shù)var formData2 = new FormData(document.getElementById("formTest"))formData2.forEach(function(value,key){

    console.log(key,value);})

注意：表單標(biāo)簽必須要添加name屬性才能獲取其數(shù)據(jù)

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

當(dāng)formData數(shù)據(jù)裝填好之后，可以直接通過ajax方法提交到服務(wù)器端，下面給出上面代碼的執(zhí)行結(jié)果。

FormData 的主要方法

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

 //01 創(chuàng)建空的formData實(shí)例對(duì)象    var data = new FormData();

    //02 設(shè)置數(shù)據(jù)(添加)    data.set("age",18);

    data.set("name","LiuY");

    data.set("type","法師");

    data.set("address","泉水中心");

    //03 設(shè)置數(shù)據(jù)(修改和刪除)    data.set("name","MiTaoer");

    data.delete("address");

    //04 設(shè)置數(shù)據(jù)(追加)    data.append("type","戰(zhàn)士");

    data.append("type","輔助");===========================================

    //05 讀取數(shù)據(jù)(指定key-one)    console.log(data.get("name"));          //MiTaoer    console.log(data.get("type"));          //法師

    //06 讀取數(shù)據(jù)(指定key-All)    console.log(data.getAll("type"));       //["法師", "戰(zhàn)士", "輔助"]    

    //07 檢查是否擁有指定的key    console.log(data.has("age"));           //true    console.log(data.has("email"));         //false

    //08 迭代器的基本使用(keys)    var keyIterator = data.keys()      //獲取迭代器對(duì)象    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();  //獲取迭代器對(duì)象    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: "戰(zhàn)士"}    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對(duì)象的遍歷    data.forEach(function(value,key){

        //輸出結(jié)果        // age 18        // name MiTaoer        // type 法師        // type 戰(zhàn)士        // type 輔助        console.log(key,value);

    })

代碼說明

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

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

formData 對(duì)象的forEach()接收一個(gè)回調(diào)函數(shù)參數(shù)，其中第一個(gè)參數(shù)為當(dāng)前遍歷數(shù)據(jù)的value值，第二個(gè)參數(shù)為key(同數(shù)組的forEach方法一致)。如果是Ajax發(fā)送GET請(qǐng)求，需要通過formData的方式來提交表單數(shù)據(jù)，那么可以借助該方法來拼接查詢字符串。

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

<form name="formTest">

    <input type="text" name="user" placeholder="請(qǐng)輸入用戶名"><br>

    <input type="text" name="email" placeholder="請(qǐng)輸入郵箱"><br>

    <input type="password" name="pass" placeholder="請(qǐng)輸入密碼"><br>

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

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

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

        //03 使用Ajax發(fā)送GET請(qǐng)求        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("請(qǐng)求成功"+xhr.responseText);

            }else{

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

            }

        }

    }

    //獲取頁面中的表單數(shù)據(jù)并處理為查詢字符串    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("&");

    }

通過上面的代碼示例可以發(fā)現(xiàn)，使用formData來處理表單數(shù)據(jù)發(fā)送GET請(qǐng)求并沒有什么優(yōu)勢(shì)，也需要通過循環(huán)來處理然后把鍵值對(duì)轉(zhuǎn)換為查詢字符串的形式拼接在URL字符串的后面。

POST請(qǐng)求

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

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

        //03 處理參數(shù)        //方式(1) 模擬表單數(shù)據(jù)        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) 獲取表單數(shù)據(jù)        //var data = new FormData(document.forms.namedItem("formTest"));

        //04 使用Ajax發(fā)送GET請(qǐng)求        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("請(qǐng)求成功"+xhr.responseText);

            }else{

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

            }

        }

    }

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

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

<form>

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

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

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

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

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

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

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

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

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

            data.append("fileName",file);

        })

        //04 使用Ajax發(fā)送GET請(qǐng)求        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("請(qǐng)求成功"+xhr.responseText);

            }else{

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

            }

        }

    }

這里順便貼出測(cè)試文件上傳寫的Node代碼以及文件上傳后的監(jiān)聽結(jié)果。

//備注：node文件名稱為uploadServer.js//01 導(dǎo)入模塊(需先通過npm來進(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 監(jiān)聽網(wǎng)絡(luò)請(qǐng)求并設(shè)置打印接收到的參數(shù)信息app.post('/api', function (req,res){

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

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

代碼說明 需要先通過npm install express multer body-parser命令在當(dāng)前路徑中安裝對(duì)應(yīng)的模塊。

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

到此，相信大家對(duì)“FormData的主要用處及實(shí)例用法介紹”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！