FormData使用方法詳解

formdata的主要用途有兩個：

將form表單元素的name與value進行組合，實現表單資料的序列化，從而減少表單元素的拼接，提高工作效率。

非同步上傳檔案

//通過formdata建構函式建立乙個空物件
var formdata=new formdata();
//通過get方法對值進行讀取
console.log(formdata.get("name"));//laotie
//通過set方法對值進行設定
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu

建立表單：

通過表單元素作為引數，實現對formdata的初始化：

//獲得表單按鈕元素
var btn=document.queryselector("#btn");
//為按鈕新增點選事件
btn.onclick=function()

// 獲取key為age的第乙個值
formdata.get("age"); 
// 獲取key為age的所有值，返回值為陣列型別
formdata.getall("age");

//通過formdata建構函式建立乙個空物件
var formdata=new formdata();
//通過get方法讀取key為name的第乙個值
console.log(formdata.get("name"));//laoliu
//通過getall方法讀取key為name的所有值
console.log(formdata.getall("name"));//["laoliu", "laoli", "laotie"]

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();
//通過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"]

//通過formdata建構函式建立乙個空物件
var formdata=new formdata();
//判斷是否包含key為name的資料
console.log(formdata.has("name"));//true
//判斷是否包含key為age的資料
console.log(formdata.has("age"));//false

//通過formdata建構函式建立乙個空物件
var formdata=new formdata();
console.log(formdata.get("name"));//laoliu
//刪除key為name的值
formdata.delete("name");
console.log(formdata.get("name"));//null

建立表單：

傳送資料：

var btn=document.queryselector("#btn");
btn.onclick=function()
}}

FormData使用方法詳解

formdata的主要用途有兩個 1 將form表單元素的name與value進行組合，實現表單資料的序列化，從而減少表單元素的拼接，提高工作效率。2 非同步上傳檔案1 建立乙個空物件通過formdata建構函式建立乙個空物件 var formdata new formdata 通過get方法對值...

FormData使用方法詳解

formdata的主要用途有兩個 1 將form表單元素的name與value進行組合，實現表單資料的序列化，從而減少表單元素的拼接，提高工作效率。2 非同步上傳檔案一建立formdata物件 1 建立乙個空物件通過formdata建構函式建立乙個空物件 var formdata new fo...

FormData使用方法詳解

FormData使用方法詳解

FormData使用方法詳解

FormData使用方法詳解

相關推薦