网络技术问题 | JavaScript 课程测验 1 | 问题 46

问题描述

在开发过程中，我们经常会使用 AJAX 技术来进行异步数据交互。在使用 AJAX 进行 POST 请求时，如何将表单数据以键值对的形式发送到服务器？

请编写相关代码片段，并附上解释。

解决方案

我们可以使用 FormData 对象来创建表单数据，并通过 XMLHttpRequest 对象来发送数据。以下是示例代码：

const xhr = new XMLHttpRequest();
const formData = new FormData();

formData.append('username', 'johndoe');
formData.append('password', 'password123');

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.responseText);
  }
};

xhr.open('POST', '/api/auth');
xhr.send(formData);

在上面的代码中，我们首先创建了一个新的 XMLHttpRequest 对象和 FormData 对象。然后，我们使用 append() 方法将要发送的数据添加到 FormData 对象中。在这个示例中，我们添加了两个键值对，一个是 username，另一个是 password。

接下来，我们设置了 onreadystatechange 事件处理程序，它会在 XMLHttpRequest 对象的状态发生变化时被触发。在状态为 XMLHttpRequest.DONE 时，我们使用 responseText 属性获取服务器返回的数据，并将其输出到控制台。

最后，我们使用 open() 方法创建一个 POST 请求，并将 FormData 对象作为参数传递给 send() 方法。

以上就是通过 AJAX 发送表单数据的方法，希望对你有所帮助。