【AJAX】URL中的查询参数详解

AJAX 和 Axios 是现代 Web 开发中常用的技术，它们都能够帮助开发者轻松进行 HTTP 请求。在进行 GET 请求时，查询参数是关键的一部分。本文将详细介绍 AJAX 和 Axios 中的查询参数用法，帮助开发者更好地管理和传递请求数据。

一、AJAX 与查询参数概述

1. 什么是查询参数？

查询参数（Query Parameters）是附加在 URL 后面的键值对，用于向服务器传递数据。查询参数在 URL 中以问号 ? 开始，后跟键值对，每个键值对用等号 = 连接，多个参数之间用 & 分隔。例如：

https://example.com/api?name=John&age=30

在这个例子中，name=John 和 age=30 是两个查询参数，服务器可以根据这些参数做出相应的响应。

2. AJAX 简介

AJAX（Asynchronous JavaScript and XML）是一种通过 JavaScript 实现的技术，用于在不重新加载整个页面的情况下与服务器交换数据。传统的 AJAX 通常使用 XMLHttpRequest 对象来发送 HTTP 请求。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api?name=John&age=30', true);
xhr.send();

上面的例子展示了如何通过 AJAX 发送一个带有查询参数的 GET 请求。

3. Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，常用于发送 HTTP 请求。它比传统的 XMLHttpRequest 更加简洁，支持自动转换 JSON 数据、处理超时、拦截器等功能。

axios.get('https://example.com/api', {
  params: {
    name: 'John',
    age: 30
  }
});

通过 params 对象，Axios 可以轻松构建查询参数。

二、AJAX 查询参数的基本用法

1. 通过 URL 直接传递查询参数

最基本的方式是在 URL 中直接拼接查询参数。例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api?name=John&age=30', true);
xhr.send();

这种方式适合简单的参数传递，但当参数较多或动态生成时，手动拼接 URL 容易出错。

2. 使用 URLSearchParams 构建查询参数

为了更优雅地构建查询参数，JavaScript 提供了 URLSearchParams 接口。URLSearchParams 可以帮助我们以一种更结构化的方式生成查询字符串：

const params = new URLSearchParams();
params.append('name', 'John');
params.append('age', 30);

const xhr = new XMLHttpRequest();
xhr.open('GET', `https://example.com/api?${params.toString()}`, true);
xhr.send();

URLSearchParams 提供了更好的灵活性，特别是当参数动态变化时。

3. 处理特殊字符

查询参数可能包含特殊字符，如空格、中文、符号等，这些字符需要进行编码。encodeURIComponent 函数可以帮助我们正确处理这些字符：

const name = 'John Doe';
const encodedName = encodeURIComponent(name);

const xhr = new XMLHttpRequest();
xhr.open('GET', `https://example.com/api?name=${encodedName}`, true);
xhr.send();

encodeURIComponent 会将空格编码为 %20，确保 URL 格式正确。

三、Axios 查询参数的基本用法

1. 使用 params 对象传递查询参数

与 AJAX 直接拼接 URL 不同，Axios 提供了更加简洁的方式来传递查询参数。使用 params 对象可以自动将参数序列化为查询字符串：

axios.get('https://example.com/api', {
  params: {
    name: 'John',
    age: 30
  }
});

Axios 会自动将 params 对象转换为 ?name=John&age=30，并附加到 URL 后。

2. 动态生成查询参数

在实际开发中，查询参数通常不是固定的，可能需要根据用户输入或其他条件动态生成。使用 JavaScript 可以灵活地构建 params 对象：

const queryParams = {
  name: 'John',
  age: 30
};

axios.get('https://example.com/api', { params: queryParams });

这样，queryParams 对象可以根据不同的逻辑动态变化，并传递到 Axios 的请求中。

3. 查询参数的编码

Axios 会自动对查询参数进行编码，因此开发者通常不需要手动调用 encodeURIComponent。例如，参数中包含空格、中文等特殊字符时，Axios 会自动进行处理：

axios.get('https://example.com/api', {
  params: {
    name: '张三',
    occupation: '软件 开发'
  }
});

Axios 会将 URL 自动编码为：https://example.com/api?name=%E5%BC%A0%E4%B8%89&occupation=%E8%BD%AF%E4%BB%B6%20%E5%BC%80%E5%8F%91。

四、常见应用场景

1. 搜索功能

在很多应用中，查询参数常用于搜索功能。例如，用户在搜索框中输入关键词，系统会通过查询参数将这些关键词发送给服务器：

axios.get('https://example.com/search', {
  params: {
    keyword: 'javascript',
    page: 1
  }
});

服务器根据 keyword 和 page 参数进行过滤和分页，返回相应的搜索结果。

2. 筛选和排序

电商平台常使用查询参数来实现筛选和排序功能，例如按价格排序或根据品牌筛选产品：

axios.get('https://example.com/products', {
  params: {
    category: 'electronics',
    sort: 'price_asc'
  }
});

category 参数用于筛选商品类别，sort 参数用于指定按价格升序排列。

3. 分页

在列表或表格数据中，分页功能也依赖于查询参数，例如当前页码和每页显示的条目数：

axios.get('https://example.com/api/items', {
  params: {
    page: 2,
    limit: 10
  }
});

服务器根据 page 和 limit 返回对应的数据页，前端则根据响应渲染列表。

五、注意事项

1. 查询参数长度限制

尽管 URL 的长度没有明确的标准限制，但大多数浏览器对 URL 的长度有一定的上限（通常是 2000 个字符左右）。如果查询参数过长，可能导致请求失败，因此对于复杂的查询，建议使用 POST 请求，并将数据放在请求体中。

axios.post('https://example.com/api/data', {
  name: 'John',
  age: 30,
  details: { ... }
});

2. 查询参数的顺序

虽然查询参数的顺序通常不会影响请求结果，但有些服务器可能对参数的顺序敏感。在这种情况下，确保查询参数按照预期顺序排列。

3. 安全性

查询参数通常暴露在 URL 中，可能会在浏览器历史记录、服务器日志中保存。因此，敏感信息如密码、令牌等不应通过查询参数传递，应该放在请求头或请求体中。

axios.get('https://example.com/api/data', {
  headers: {
    Authorization: 'Bearer your_token'
  }
});

六、总结

查询参数在 AJAX 和 Axios 请求中非常常见，它们可以帮助开发者在前端与服务器之间传递数据。通过合理使用查询参数，开发者可以实现搜索、筛选、分页等常见功能。对于复杂的参数，Axios 提供了简洁且强大的支持，而在实际应用中，我们也需要注意查询参数的长度、安全性以及编码问题。

推荐：

• JavaScript
• react
• vue

---