JavaScript 中使用 AJAX 提交表单112

在 JavaScript 中使用 AJAX（异步 JavaScript 和 XML）可以异步地将表单数据提交到服务器，而无需重新加载整个页面。这使得 Web 应用程序更加响应和用户友好。

使用 XMLHttpRequest 对象

要在 JavaScript 中使用 AJAX 提交表单，首先需要创建一个 XMLHttpRequest 对象。该对象提供了发送和接收 HTTP 请求所需的方法和属性。
const xhr = new XMLHttpRequest();

open() 方法

接下来，使用 open() 方法来配置请求的详细信息，包括请求类型（GET 或 POST）、请求 URL 和是否异步进行请求。
('POST', '/submit-form', true);

setRequestHeader() 方法

在发送请求之前，可以设置请求标头信息，例如内容类型。对于提交表单，需要设置 "Content-Type" 标头为 "application/x-www-form-urlencoded"。
('Content-Type', 'application/x-www-form-urlencoded');

send() 方法

最后，使用 send() 方法来发送请求。对于表单数据，需要将序列化后的表单数据作为参数传递给 send() 方法。

为了序列化表单数据，可以遍历表单元素并创建键值对字符串，然后使用 encodeURIComponent() 函数对每个键值对进行编码。
const formData = new FormData(form);
const encodedData = new URLSearchParams(formData).toString();
(encodedData);

监听事件

当服务器响应请求时，可以通过监听 XMLHttpRequest 对象上的事件来处理响应。* onload：当请求成功并收到响应时触发。
* onerror：当请求失败时触发。

= () => {
// 处理服务器响应
};
= () => {
// 处理请求失败
};

示例代码

以下是一个使用 JavaScript AJAX 提交表单的示例代码：
const form = ('form');
('submit', (event) => {
();
const xhr = new XMLHttpRequest();
('POST', '/submit-form', true);
('Content-Type', 'application/x-www-form-urlencoded');
const formData = new FormData(form);
const encodedData = new URLSearchParams(formData).toString();
(encodedData);
= () => {
// 处理服务器响应
alert('表单已成功提交！');
};
= () => {
// 处理请求失败
alert('提交表单时出错！');
};
});