温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！
表单 ajax 提交是一种在不刷新整个页面的情况下，通过 JavaScript 发送异步请求来提交表单数据的技术。这种技术可以提升用户体验，减少页面刷新的次数，同时还可以实现与服务器的实时交互。
在实现表单 ajax 提交的过程中，我们需要使用 JavaScript 来监听表单的提交事件，并阻止默认的表单提交行为。然后，我们使用 XMLHttpRequest 对象来创建一个异步请求，并将表单数据作为请求的参数发送给服务器。在服务器端处理完请求后，服务器会返回一个响应，我们可以通过监听 XMLHttpRequest 对象的 readyState 和 status 属性来获取响应的结果。
下面是一个示例代码，演示了如何使用表单 ajax 提交：
<!DOCTYPE html>
<html>
<head>
<title>表单 Ajax 提交示例</title>
<script>
function submitForm() {
// 阻止表单的默认提交行为
event.preventDefault();
// 创建异步请求对象
var xhr = new XMLHttpRequest();
// 监听请求状态的变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理服务器返回的响应
console.log(xhr.responseText);
}
};
// 获取表单元素
var form = document.getElementById('myForm');
// 获取表单数据
var formData = new FormData(form);
// 发送异步请求
xhr.open('POST', 'http://example.com/submit', true);
xhr.send(formData);
}
</script>
</head>
<body>
<form id="myForm" onsubmit="submitForm()">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">提交</button>
</form>
</body>
</html>
在上面的示例代码中，我们首先使用 JavaScript 监听表单的提交事件，并在事件处理函数中阻止默认的表单提交行为。然后，我们创建了一个 XMLHttpRequest 对象，并通过该对象的 onreadystatechange 属性来监听请求状态的变化。当请求状态为 4（即请求已完成）且状态码为 200 时，表示请求成功，我们可以通过 XMLHttpRequest 对象的 responseText 属性来获取服务器返回的响应结果。
接下来，我们获取了表单元素，并使用 FormData 对象来获取表单数据。我们通过 XMLHttpRequest 对象的 open 方法来指定请求的方法、URL 和是否异步发送请求，然后通过 send 方法将表单数据发送给服务器。
总结一下，表单 ajax 提交是一种通过 JavaScript 发送异步请求来提交表单数据的技术。通过监听表单的提交事件，阻止默认的表单提交行为，并使用 XMLHttpRequest 对象来创建异步请求，我们可以实现与服务器的实时交互。
