JS FormData物件使用方法例項詳解
阿新 • • 發佈:2020-02-14
本文例項講述了JS FormData物件使用方法。分享給大家供大家參考,具體如下:
FormData的主要用途有兩個:
1、將form表單元素的name與value進行組合,實現表單資料的序列化,從而減少表單元素的拼接,提高工作效率。
2、非同步上傳檔案
一、建立formData物件
1、建立一個空物件:
//通過FormData建構函式建立一個空物件 var formdata=new FormData(); //可以通過append()方法來追加資料 formdata.append("name","laotie"); //通過get方法對值進行讀取 console.log(formdata.get("name"));//laotie //通過set方法對值進行設定 formdata.set("name","laoliu"); console.log(formdata.get("name"));//laoliu
2、通過表單對formData進行初始化
建立表單:
<form id="advForm"> <p>廣告名稱:<input type="text" name="advName" value="xixi"></p> <p>廣告類別:<select name="advType"> <option value="1">輪播圖</option> <option value="2">輪播圖底部廣告</option> <option value="3">熱門回收廣告</option> <option value="4">優品精選廣告</option> </select></p> <p><input type="button" id="btn" value="新增"></p> </form>
通過表單元素作為引數,實現對formData的初始化:
//獲得表單按鈕元素 var btn=document.querySelector("#btn"); //為按鈕新增點選事件 btn.onclick=function(){ //根據ID獲得頁面當中的form表單元素 var form=document.querySelector("#advForm"); //將獲得的表單元素作為引數,對formData進行初始化 var formdata=new FormData(form); //通過get方法獲得name為advName元素的value值 console.log(formdata.get("advName"));//xixi //通過get方法獲得name為advType元素的value值 console.log(formdata.get("advType"));//1 }
二、操作方法
1、通過get(key)與getAll(key)來獲取相對應的值
// 獲取key為age的第一個值 formdata.get("age"); // 獲取key為age的所有值,返回值為陣列型別 formdata.getAll("age");
2、通過append(key,value)在資料末尾追加資料
//通過FormData建構函式建立一個空物件 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的資料 formdata.append("name","laoliu"); //通過append()方法在末尾追加key為name值為laoli的資料 formdata.append("name","laoli"); //通過append()方法在末尾追加key為name值為laotie的資料 formdata.append("name","laotie"); //通過get方法讀取key為name的第一個值 console.log(formdata.get("name"));//laoliu //通過getAll方法讀取key為name的所有值 console.log(formdata.getAll("name"));//["laoliu","laoli","laotie"]
3、通過set(key,value)來設定修改資料
key的值不存在,會新增一條資料
//通過FormData建構函式建立一個空物件 var formdata=new FormData(); //如果key的值不存在會為資料新增一個key為name值為laoliu的資料 formdata.set("name","laoli"); //通過get方法讀取key為name的第一個值 console.log(formdata.get("name"));//laoli key的值存在,會修改對應的value值 //通過FormData建構函式建立一個空物件 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的資料 formdata.append("name","laoliu"); //通過append()方法在末尾追加key為name值為laoliu2的資料 formdata.append("name","laoliu2"); //通過get方法讀取key為name的第一個值 console.log(formdata.get("name"));//laoliu //通過getAll方法讀取key為name的所有值 console.log(formdata.getAll("name"));//["laoliu","laoliu2"] //將存在的key為name的值修改為laoli formdata.set("name","laoli"); //通過get方法讀取key為name的第一個值 console.log(formdata.get("name"));//laoli //通過getAll方法讀取key為name的所有值 console.log(formdata.getAll("name"));//["laoli"]
4、通過has(key)來判斷是否存在對應的key值
//通過FormData建構函式建立一個空物件 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的資料 formdata.append("name","laoliu"); //判斷是否包含key為name的資料 console.log(formdata.has("name"));//true //判斷是否包含key為age的資料 console.log(formdata.has("age"));//false
5、通過delete(key)可以刪除資料
//通過FormData建構函式建立一個空物件 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的資料 formdata.append("name","laoliu"); console.log(formdata.get("name"));//laoliu //刪除key為name的值 formdata.delete("name"); console.log(formdata.get("name"));//null
三、通過XMLHttpRequest傳送資料
建立表單:
<form id="advForm"> <p>廣告名稱:<input type="text" name="advName" value="xixi"></p> <p>廣告類別:<select name="advType"> <option value="1">輪播圖</option> <option value="2">輪播圖底部廣告</option> <option value="3">熱門回收廣告</option> <option value="4">優品精選廣告</option> </select></p> <p>廣告圖片:<input type="file" name="advPic"></p> <p>廣告地址:<input type="text" name="advUrl"></p> <p>廣告排序:<input type="text" name="orderBy"></p> <p><input type="button" id="btn" value="新增"></p> </form>
傳送資料:
var btn=document.querySelector("#btn"); btn.onclick=function(){ var formdata=new FormData(document.getElementById("advForm")); var xhr=new XMLHttpRequest(); xhr.open("post","http://127.0.0.1/adv"); xhr.send(formdata); xhr.onload=function(){ if(xhr.status==200){ //... } } }
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。