Javascript 设置查询参数

在开发网页应用程序时，我们通常需要向服务器发送请求并获取数据。有时候，我们需要向请求中添加一些查询参数，以便服务器能够正确地处理我们的请求。

在 Javascript 中，可以通过以下方式设置查询参数：

方法一：手动拼接 URL

一种简单的方法是手动构建 URL 并将查询参数作为字符串附加到 URL 上。例如：

const apiUrl = 'https://api.example.com/users';
const query = '?name=John&age=30';
const url = apiUrl + query;

这样，我们可以将 url 发送给服务器，服务器就可以正确地处理查询参数了。但是，这种方式有一个缺点，就是我们需要手动构建 URL，如果查询参数比较多，代码将变得非常冗杂。

方法二：使用 URLSearchParams 对象

在 Javascript 中，可以使用 URLSearchParams 对象来处理 URL 中的查询参数。使用该对象可以轻松地添加、删除和修改查询参数。

添加查询参数

const searchParams = new URLSearchParams();
searchParams.append('name', 'John');
searchParams.append('age', '30');
const apiUrl = 'https://api.example.com/users';
const url = apiUrl + '?' + searchParams.toString();

上面的代码中，首先创建了一个 URLSearchParams 对象，然后使用 append 方法添加了两个查询参数。最后，调用 toString 方法将 searchParams 对象转换为查询字符串，并将它与 API URL 拼接起来。这样，我们就得到了带有查询参数的 URL。

删除查询参数

const searchParams = new URLSearchParams('?name=John&age=30');
searchParams.delete('age');
const apiUrl = 'https://api.example.com/users';
const url = apiUrl + '?' + searchParams.toString();

上面的代码中，首先创建了一个 URLSearchParams 对象，并将查询字符串作为参数传递给它。然后，使用 delete 方法删除了名为 age 的查询参数。最后，再次调用 toString 方法将 searchParams 对象转换为查询字符串，并将它与 API URL 拼接起来。

修改查询参数

const searchParams = new URLSearchParams('?name=John&age=30');
searchParams.set('age', '40');
const apiUrl = 'https://api.example.com/users';
const url = apiUrl + '?' + searchParams.toString();

上面的代码中，首先创建了一个 URLSearchParams 对象，并将查询字符串作为参数传递给它。然后，使用 set 方法将名为 age 的查询参数的值修改为 40。最后，再次调用 toString 方法将 searchParams 对象转换为查询字符串，并将它与 API URL 拼接起来。

以上，我们介绍了两种设置查询参数的方法，希望对你有所帮助。