Ajax 获取请求参数

Ajax 是指通过 JavaScript 发送异步 HTTP 请求，以便在不刷新页面的情况下从服务器获取和更新数据。在 Ajax 请求中，我们通常需要从客户端向服务端发送请求参数。本文将介绍如何使用 JavaScript 和 Ajax 获取请求参数。

获取表单数据

如果我们要使用 Ajax 发送表单数据，我们可以通过以下代码获取表单数据：

const form = document.querySelector('form');
const formData = new FormData(form);

在这里，我们首先获取了表单元素，然后创建了一个 FormData 对象，这个对象会自动将表单元素的值进行序列化，并准备发送。

获取 URL 参数

如果我们需要从 URL 中获取参数，我们可以使用以下代码：

const params = new URLSearchParams(window.location.search);
const myParam = params.get('myParam');

在这里，我们首先创建了一个 URLSearchParams 对象，然后通过 get() 方法获取参数的值。

发送请求参数

使用 Ajax 发送请求时，我们需要将参数作为请求体发送。有很多方法可以实现此目的，例如使用 XMLHttpRequest 或 Fetch API。

以下是一个使用 XMLHttpRequest 发送 Ajax 请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
const data = JSON.stringify({
  name: 'John Smith',
  age: 26,
  email: 'john.smith@example.com'
});
xhr.send(data);

在这里，我们首先创建了一个 XMLHttpRequest 对象，然后打开了一个 POST 请求。我们通过 setRequestHeader() 方法设置了请求头，以便告诉服务器请求体是 JSON 格式。xhr.onload 函数会在请求完成后执行，如果请求成功，我们可以使用 responseText 属性获取响应内容。

总结

使用 JavaScript 和 Ajax 获取请求参数是非常简单的，但需要注意的是，请求参数的形式可能不同。在表单数据中，我们需要将表单元素的值序列化，而在 URL 中，我们需要解析参数并获取值。在发送请求时，我们需要根据不同的请求体类型进行设置，以便服务器能够正确地解析请求体。