跳到主要内容

form

在 HTML 5 中，使用 XMLHttpRequest 对象发送表单数据时，需要先创建一个 FormData 对象。

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

FormData() 构造函数包含一个参数，表示页面中的一个表单（ form ）元素。

创建好 formData 的时候，把该对象传递给 XMLHttpRequest 对象的 send() 方法即可 : xhr.send(formData);；

使用 formData 对象的 append() 方法可以追加数据，这些数据将向服务器发送时随着用户在表单控件的输入数据一起发向服务器端：

formData.append('add_data', ' 测试 '); // 发送前追加数据

该方法包括两个参数：第一个是追加数据的键名，第二个是追加数据的键值。

在服务器端，使用相同的方法来处理使用 XMLHttpRequest 对象提交的表单数据与使用非 Ajax 方式提交的表单数据，当 formData 对象中的包含附加数据时，服务器端将该数据的键名视为一个表单控件的 name 属性值，将该数据的键值视为该表单控件的数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>123</title>

    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); }
  </head>
  <body>
    <form id="form1">
      用户名： <input type="text" name="name" /> 密 码：
      <input type="password" name="pass" /><input
        type="button"
        value=" 发送 "
        onclick="sendForm();"
      />
    </form>
    <output id="result"></output>
  </body>
</html>