js 中的 formData 對象是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用 FormData 對象可以將form表單元素的 name 與 value 進行組合,實現表單數據的序列化,從而減少表單元素的拼接難度,提高工作效率!

創建一個 FormData 對象

1、創建一個空的 Formdata 對象

<script>
//通過FormData構造函數創建一個空對象
var formdata = new FormData();
//可以通過append()方法來追加數據
formdata.append("name", "feiniaomy.com");
//通過get方法對值進行讀取
console.log(formdata.get("name"));
//feiniaomy.com
//通過set方法對值進行設置
formdata.set("name", "mochu");
console.log(formdata.get("name"));
//mochu
</script>

2、通過HTML form 表單對 FormData 進行初始化

<form id="advForm">
    <input type="text" name="name" >
    <input type="text" name="sex" >
    <select name="add" >
        <option value="1">上海</option>
        <option value="2">山東</option>
        <option value="3">北京</option>
    </select>
    <button id="btn">提交</button>
</form>
<script>
//獲得表單按鈕元素
var btn = document.getElementById("#btn");
//為按鈕添加點擊事件
btn.onclick = function () {
    //根據ID獲得頁面當中的form表單元素
    var form = document.getElementByIdr("advForm");
    //將獲得的表單元素作為參數,對formData進行初始化
    var formdata = new FormData(form);
    //通過get方法獲得name為name元素的value值
    console.log(formdata.get("name"));//xixi
    //通過get方法獲得name為sex元素的value值
    console.log(formdata.get("sex"));//1 
}
</script>

js Formdata 對象中的方法使用

1、FormData.get(key) 與 FormData.getAll(key) 獲取form 對像中對應的值

<script>
// 獲取key為name的第一個值
formdata.get("name");
// 獲取key為add的所有值,以數組類型返回
formdata.getAll("add");
</script>

2、FormData.append(key,value) 對 FormData 對象追加數據

<script>
var formdata = new FormData();
formdata.append("name", "mochu");
formdata.append("age", "18");
console.log(formdata.get("name"));// mochu
console.log(formdata.get("age"));// 18
</script>

3、FormData.set(key,value) 添加或修改數據

<script>
//通過FormData構造函數創建一個空對象
var formdata = new FormData();
//如果 key 已存在則為修改其value值,如不存在則被會添加
formdata.set("name", "mochu");
console.log(formdata.get("name"));// mochu
</script>

4、FormDate.has(key) 判斷key值是否存在

<script>
var formdata = new FormData();
formdata.append("name", "feiniaomy.com");
//判斷是否包含key為name的數據
console.log(formdata.has("name"));//true
//判斷是否包含key為age的數據
console.log(formdata.has("age"));//false
</script>

5、FormData.delete(key) 刪除指定key值的數據

<script>
var formdata = new FormData();
formdata.append("name", "feiniaomy.com");
console.log(formdata.has("name")); //true
//刪除KEY為name的數據
formdata.delete('name');
console.log(formdata.has("name")); //false
</script>

FormData 對象數據通過XMLHttpRequest發送的方法

示例代碼

<form id="advForm">
    <input type="text" name="name" >
    <input type="text" name="sex" >
    <select name="add" >
        <option value="1">上海</option>
        <option value="2">山東</option>
        <option value="3">北京</option>
    </select>
    <button id="btn">提交</button>
</form>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
    var formdata = new FormData(document.getElementById("dvForm"));
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://127.0.0.1/pst");
    xhr.send(formdata);
    xhr.onload = function () {
        if (xhr.status == 200) {
            //...
        }
    }
}
</script>