AJAX提交form表單（案例實戰）

在 JavaScript 中，使用 XMLHttpRequest 物件傳送表單資料時，需要建立一個 FormData 物件。用法如下：

var form = document.getElementById("form1");
var formData = new FormData(form);

FormData() 函數包含一個引數，表示頁面中的一個表單（form）元素。

建立 formData 物件之後，把該物件傳遞給 XMLHttpRequest 物件的 send() 方法即可。

xhr.send(formData);

使用 formData 物件的 append() 方法可以追加資料，這些資料將在向伺服器端傳送資料時隨著使用者在表單控制元件中輸入的資料一起傳送到伺服器端。append() 方法用法如下：

formData.append('add_data', '測試');  //在傳送之前新增附加資料

append() 方法包含兩個引數：第 1 個參數列示追加資料的鍵名，第 2 個參數列示追加資料的鍵值。

當 formData 物件中包含附加資料時，伺服器端將該資料的鍵名視為一個表單控制元件的 name 屬性值，將該資料的鍵值視為該表單控制元件中的資料。

前台頁面

<script>
    function sendForm(){
    var form = document.getElementById("form1");
    var formData = new FormData(form);
    formData.append('grade','3')
    var xhr = new XMLHttpRequest();
    xhr.open('POST','test.php',true);
    xhr.onload = function(e){
        if(this.status == 200){
            document.getElementById("result").innerHTML = this.response;
        }
    };
    xhr.send(formData);
    }
</script>
<form id="form1">
  使用者名稱：<input type="text" name="name" /><br />
  密碼：<input type="password" name="pass" /><br />
  <input type="button" value="傳送" onclick="sendForm()" />
</form>
<output id="result"></output>

後台頁面

<?php
    $name = $_POST['name'];
    $pass = $_POST['pass'];
    $grade = $_POST['grade'];
    echo '伺服器端接收資料：<br />';
    echo '使用者名稱：'.$name.'<br />';
    echo '密碼：'.$pass.'<br />';
    echo '等級：'.$grade.'<br />';
    flush();
?>

演示效果如下：

---