Ajax 简明教程
AJAX - Submitting Forms
AJAX 是最为流行的 Web 技术，几乎所有 Web 开发者都使用它来创建动态 Web 应用程序。它利用 Web 浏览器内置的 XMLHttpRequest 对象在后台将数据异步地发送至 Web 服务器或从 Web 服务器接收数据，而无需刷新或影响网页。我们还能利用 AJAX 轻松地提交表单。
所以，要使用 AJAX 提交表单，我们需要遵循以下步骤：
Step 1 − 使用 XMLHttpRequest() 构造函数创建一个 XMLHttpRequest 对象；
var zhttp = new XMLHttpRequest();Step 2 − 创建一个变量（也称为表单元素），它包含使用 document.querySelector() 方法在表单中显示的所有键值对。
const FormElement = document.querySelector("mForm")此处，如果你有多个表单，那么可以用其 ID 定义表单。
Step 3 − 使用 FormData 构造函数创建一个 FormData 对象，并将其传递到上述创建的 FormElement 中。这意味着 FormData 对象使用键值对初始化。
const myForm = new FormData(FormElement)Step 4 − 创建一个将在服务器响应请求时执行的回调函数。此函数在 XHR 对象的 onreadystatechange 属性内定义。
zhttp.onreadystatechange = function() {
// Body
}此处，responseText 属性将以 JavaScript 字符串的形式返回服务器的响应，我们将在网页中进一步使用它来显示消息。
document.getElementById("responseElement").innerHTML = this.responseText;Step 5 − 现在我们使用 open() 函数。在 open() 函数内部，我们将 POST 请求与我们必须将表单数据发送到的 URL 一起传递。
zhttp.open("POST", url, async)Step 6 − 最后，我们使用 send() 函数将请求连同 FormData 对象一起发送到服务器。
zhttp.send(myForm);因此，完整示例如下：
Example
在上面的代码中，我们创建了一个简单的 HTML 表单来收集用户数据，然后使用 XMLHttpRequest 和 JavaScript 提交表单数据。
因此，当用户单击“提交记录”按钮时，将调用 sendFormData() 函数。sendFormData() 函数首先创建一个新的 XHR 对象。然后，创建一个表单元素来存储 HTML 表单中的所有键值对。然后，它是一个新的 FormData 对象，并将表单元素传递到对象中。接下来，它设置了一个回调函数来处理来自服务器的响应。当 readyState 属性的值 = 4 且 Status 属性的值 = 201 时，将触发此函数。最后，它调用 open() 方法并使用服务器 URL 初始化 HTTP POST 方法，最后调用 send() 方法将 FormData 请求发送到服务器。
因此，当来自服务器的响应时，回调函数将显示结果并在控制台日志中打印消息。
<!DOCTYPE html>
<html>
<body>
<script>
function sendFormData() {
// Creating XMLHttpRequest object
var zhttp = new XMLHttpRequest();
const mFormEle = document.querySelector("#mForm")
// Creating FormData object
const myForm = new FormData(mFormEle);
// Creating call back function to handle the response
zhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
document.getElementById("example").innerHTML = this.responseText;
console.log("Form Data Posted Successfully")
}
};
// Post/Add form data on the server
zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
// Sending the request to the server
zhttp.send(new FormData(mFormEle));
}
</script>
<!--Creating simple form-->
<form id = "mForm">
<h2>Enter the requested Data</h2>
<label for="Utitle">Title</label>
<input id="Utitle" type="text" name="title"><br>
<label for="UId">UserId</label>
<input id="UId" type="number" name="UserID"><br>
<label for="Ubody">Body</label>
<input id="Ubody" type="text" name="body"><br>
<label for="Uage">Age</label>
<input id="Uage" type="number" name="age"><br>
<button type="button" onclick="sendFormData()">Submit Record</button>
</form>
<div id="example"></div>
</body>
</html>