Ajax 与查询参数：如何通过 Ajax 传递和处理查询参数

---

Ajax 与查询参数：如何通过 Ajax 传递和处理查询参数 🔍

在 Web 开发中，Ajax（Asynchronous JavaScript and XML） 是一种常用的技术，允许网页在不重新加载页面的情况下与服务器进行异步通信。这使得用户体验更流畅，因为它避免了整个页面的刷新。

在使用 Ajax 进行数据交互时，传递查询参数是非常常见的一种需求，特别是在 URL 中传递参数，用来向服务器请求特定的数据或执行某些操作。本文将详细介绍 如何通过 Ajax 传递查询参数，以及在服务器端如何接收和处理这些参数。

---

一、查询参数的概念 🌐

查询参数通常指的是 URL 中 ? 后面跟随的键值对，它们用于向服务器传递额外的信息。例如，https://example.com/search?query=javascript&page=2 中的 query 和 page 就是查询参数。

在 URL 中，查询参数是以 & 分隔的键值对的形式存在，格式如下：

http://example.com/api?key1=value1&key2=value2

• key1 和 key2 是查询参数的名称。
• value1 和 value2 是查询参数的值。

通常，查询参数用来传递一些动态的、用户输入的信息，如搜索关键词、分页信息等。

---

二、如何使用 Ajax 发送查询参数 🔄

在 Ajax 中，我们可以通过不同的方式向服务器发送带有查询参数的请求。常见的请求方法是 GET，通过 URL 传递查询参数，当然也可以使用 POST 方法发送参数，在请求体中传递数据。

1. 使用 GET 请求传递查询参数

通过 Ajax 的 GET 请求，可以将查询参数直接附加到 URL 后面。以下是一个示例：

// 创建一个新的 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 配置 GET 请求，并将查询参数附加到 URL 中
const searchQuery = 'javascript';
const pageNumber = 2;
xhr.open('GET', `https://example.com/search?query=${searchQuery}&page=${pageNumber}`, true);

// 设置请求完成后的回调函数
xhr.onload = function () {
  if (xhr.status === 200) {
    // 请求成功，处理返回的响应数据
    console.log('Response:', xhr.responseText);
  } else {
    console.log('Request failed with status:', xhr.status);
  }
};

// 发送请求
xhr.send();

在这个例子中，query 和 page 作为查询参数传递给服务器。当 Ajax 请求被发送时，服务器将根据这些参数返回相应的数据。

2. 使用 POST 请求传递查询参数

虽然 GET 请求是通过 URL 传递查询参数，但如果你使用 POST 请求，也可以在请求体中发送参数。通常，POST 请求适用于需要传输较多数据或敏感信息的情况。

const xhr = new XMLHttpRequest();
const data = {
  query: 'javascript',
  page: 2
};

// 配置 POST 请求
xhr.open('POST', 'https://example.com/search', true);
xhr.setRequestHeader('Content-Type', 'application/json');

// 设置请求完成后的回调函数
xhr.onload = function () {
  if (xhr.status === 200) {
    // 请求成功，处理返回的数据
    console.log('Response:', xhr.responseText);
  } else {
    console.log('Request failed with status:', xhr.status);
  }
};

// 将数据转为 JSON 格式并发送
xhr.send(JSON.stringify(data));

在这个例子中，我们将查询参数 query 和 page 放入请求体中，以 JSON 格式发送到服务器。通过 xhr.setRequestHeader() 设置 Content-Type 为 application/json，告诉服务器请求体的格式。

3. 使用现代的 fetch() API

现代浏览器支持 fetch() API，它是一个更简洁和灵活的替代 XMLHttpRequest 的方法。通过 fetch()，我们同样可以传递查询参数。

const searchQuery = 'javascript';
const pageNumber = 2;

// 构建 URL 并附加查询参数
const url = `https://example.com/search?query=${searchQuery}&page=${pageNumber}`;

// 使用 fetch 发送 GET 请求
fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log('Response:', data);
  })
  .catch(error => {
    console.log('Request failed:', error);
  });

在上面的例子中，查询参数被直接附加到 URL 上。fetch() 默认发送 GET 请求，所以它非常适合用于这种简单的查询参数传递。

---

三、如何在服务器端处理查询参数 🛠️

无论你使用的是 GET 还是 POST 请求，服务器端都需要能够解析查询参数并根据这些参数返回相应的数据。以下是如何在 Node.js 的 Express 框架中处理查询参数的示例。

1. 处理 GET 请求中的查询参数

在 Express 中，查询参数可以通过 req.query 获取：

const express = require('express');
const app = express();

app.get('/search', (req, res) => {
  const query = req.query.query;  // 获取查询参数 'query'
  const page = req.query.page;    // 获取查询参数 'page'

  res.json({
    message: `You searched for ${query} on page ${page}`
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

当访问 http://localhost:3000/search?query=javascript&page=2 时，服务器会返回：

{
  "message": "You searched for javascript on page 2"
}

2. 处理 POST 请求中的查询参数

如果你使用的是 POST 请求，查询参数通常包含在请求体中，需要通过 req.body 获取。在 Express 中，可以使用 express.json() 中间件来解析请求体。

const express = require('express');
const app = express();
app.use(express.json());  // 解析 JSON 格式的请求体

app.post('/search', (req, res) => {
  const query = req.body.query;  // 获取 POST 请求中的查询参数 'query'
  const page = req.body.page;    // 获取 POST 请求中的查询参数 'page'

  res.json({
    message: `You searched for ${query} on page ${page}`
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

在这种情况下，客户端发送的 POST 请求体包含查询参数（如 JSON 格式），而服务器通过 req.body 获取这些参数。

---

四、总结 🎯

主题	描述
查询参数的概念	查询参数通过 URL 中的键值对传递，用于向服务器提供额外的信息。
通过 Ajax 发送查询参数	使用 Ajax 的 GET 或 POST 请求将查询参数传递到服务器。
GET 请求传递查询参数	使用 URL 的查询字符串传递参数，如 https://example.com?key=value。
POST 请求传递查询参数	使用请求体（通常为 JSON 格式）传递参数，适合数据量较大的情况。
现代的 Fetch API	使用 fetch() 简洁地发送带有查询参数的 Ajax 请求。
服务器端处理查询参数	在 Express 中通过 req.query 或 req.body 获取查询参数。

通过合理地使用查询参数，我们可以让客户端与服务器进行灵活的交互。理解并掌握如何通过 Ajax 发送和接收查询参数，对于构建高效的 Web 应用至关重要。