資訊專欄INFORMATION COLUMN
摘要：概述類型其實是在級定義的，它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)當(dāng)然是用于傳輸提供便利。如果是使用表單初始化，每一個表單字段對應(yīng)一條數(shù)據(jù)，它們的屬性即為值，它們屬性對應(yīng)值。參考兼容性查詢高級程序設(shè)計
FormData 1. 概述
FormData類型其實是在XMLHttpRequest 2級定義的，它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)（當(dāng)然是用于XHR傳輸）提供便利。
2. 構(gòu)造函數(shù)創(chuàng)建一個formData對象實例有幾種方式
1、創(chuàng)建一個空對象實例
var formData = new FormData();
此時可以調(diào)用append()方法來添加數(shù)據(jù)
2、使用已有的表單來初始化一個對象實例
假如現(xiàn)在頁面已經(jīng)有一個表單
我們可以使用這個表單元素作為初始化參數(shù)，來實例化一個formData對象
// 獲取頁面已有的一個form表單
var form = document.getElementById("myForm");
// 用表單來初始化
var formData = new FormData(form);
// 我們可以根據(jù)name來訪問表單中的字段
var name = formData.get("name"); // 獲取名字
var psw = formData.get("psw"); // 獲取密碼
// 當(dāng)然也可以在此基礎(chǔ)上，添加其他數(shù)據(jù)
formData.append("token","kshdfiwi3rh");
3. 操作方法
首先，我們要明確formData里面存儲的數(shù)據(jù)形式，一對key/value組成一條數(shù)據(jù)，key是唯一的，一個key可能對應(yīng)多個value。如果是使用表單初始化，每一個表單字段對應(yīng)一條數(shù)據(jù)，它們的HTML name屬性即為key值，它們value屬性對應(yīng)value值。
| key | value |
|---|---|
| k1 | [v1,v2,v3] |
| k2 | v4 |
我們可以通過get(key)/getAll(key)來獲取對應(yīng)的value，
formData.get("name"); // 獲取key為name的第一個值
formData.get("name"); // 返回一個數(shù)組，獲取key為name的所有值
3.2 添加數(shù)據(jù)
我們可以通過append(key, value)來添加數(shù)據(jù)，如果指定的key不存在則會新增一條數(shù)據(jù)，如果key存在，則添加到數(shù)據(jù)的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]
3.3 設(shè)置修改數(shù)據(jù)
我們可以通過set(key, value)來設(shè)置修改數(shù)據(jù)，如果指定的key不存在則會新增一條，如果存在，則會修改對應(yīng)的value值。
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
3.4 判斷是否該數(shù)據(jù)
我們可以通過has(key)來判斷是否對應(yīng)的key值
formData.append("k1", "v1");
formData.append("k2",null);
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
3.5 刪除數(shù)據(jù)
通過delete(key)，來刪除數(shù)據(jù)
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
formData.getAll("k1"); // []
3.6 遍歷
我們可以通過entries()來獲取一個迭代器，然后遍歷所有的數(shù)據(jù)，
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}
可以看到返回迭代器的規(guī)則
每調(diào)用一次next()返回一條數(shù)據(jù)，數(shù)據(jù)的順序由添加的順序決定
返回的是一個對象，當(dāng)其done屬性為true時，說明已經(jīng)遍歷完所有的數(shù)據(jù)，這個也可以作為判斷的依據(jù)
返回的對象的value屬性以數(shù)組形式存儲了一對key/value，數(shù)組下標(biāo)0為key，下標(biāo)1為value，如果一個key值對應(yīng)多個value，會變成多對key/value返回
我們也可以通過values()方法只獲取value值
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
var i = formData.entries();
i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}
4. 發(fā)送數(shù)據(jù)
我們可以通過xhr來發(fā)送數(shù)據(jù)
var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);
這種方式可以來實現(xiàn)文件的異步上傳。
參考兼容性查詢
MDN
《JavaScript高級程序設(shè)計》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80197.html
摘要：有談?wù)劽嬖嚺c面試題對于前端面試的一些看法。動態(tài)規(guī)劃算法的思想及實現(xiàn)方法幫大家理清動態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個 JavaScript 知識點 在 JavaScript 的數(shù)據(jù)綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎(chǔ)...
摘要：與不同的是，應(yīng)該以發(fā)送的數(shù)據(jù)作為請求的主體。有了這些不同的事件支持，開發(fā)者可以免去檢查之類的工作，更加的方便。其中事件和事件比較重要。而事件則會為在瀏覽器接收數(shù)據(jù)期間周期性地觸發(fā)。 在上篇筆記中，我們主要談了一些概述和跨域的問題，這一次我們聊聊請求和響應(yīng)的具體內(nèi)容。 向服務(wù)器發(fā)起請求 我們在創(chuàng)建了XHR對象后，接著需要用兩個方法來發(fā)送請求：open()和send()，這兩個方法有點像賽...
摘要：當(dāng)用戶完成選擇文件動作時，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因為的核心是對象，異步的實現(xiàn)是通過一個對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。 背景 平時工作中經(jīng)常會遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。 我們分別來看一下element 和 antd 手動上傳怎么處理：...
閱讀 2864·2021-09-22 15:43
閱讀 4781·2021-09-06 15:02
閱讀 854·2019-08-29 13:55
閱讀 1687·2019-08-29 12:58
閱讀 3074·2019-08-29 12:38
閱讀 1257·2019-08-26 12:20
閱讀 2272·2019-08-26 12:12
閱讀 3321·2019-08-23 18:35
