URLSearchParams ：处理 URL 查询参数的接口

声明：本文内容（除实战外）来自通义灵码。

简介

URLSearchParams 是一个用于处理 URL 查询参数的接口。

它提供了一种简单的方法来操作 URL 中的查询字符串部分。

总结

示例一

javascript 复制代码

//URLSearchParams用法示例
var paramsExample = new URLSearchParams("name=MuMu&age=25");
console.log(paramsExample.get("name")); // 输出: MuMu
console.log(paramsExample.get("age")); // 输出: 25
console.log(paramsExample.has("name")); // 输出: true
console.log(paramsExample.has("gender")); // 输出: false
paramsExample.append("gender", "male");
console.log(paramsExample.toString()); // 输出: name=MuMu&age=25
//set()方法 会覆盖同名参数
paramsExample.set("age", "30");
console.log(paramsExample.toString()); // 输出: name=MuMu&age=30
paramsExample.delete("age");
console.log(paramsExample.toString()); // 输出: name=MuMu&gender
console.log([...paramsExample]); // 输出: [ ['name', 'MuMu'], ['gender', 'male'] ]
console.log(paramsExample.keys()); // 输出: URLSearchParamsIterator { 'name', 'gender' }
console.log(paramsExample.values()); // 输出: URLSearchParamsIterator { 'MuMu', 'male' }
console.log(paramsExample.entries()); // 输出: URLSearchParamsIterator { ['name 'MuMu'], ['gender', 'male'] }
console.log(paramsExample.sort().toString()); // 输出: age=30&gender=male&name=MuMu

示例二

html 复制代码

<script>
  //URLSearchParams
  // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
  // 它提供了一种简单的方法来操作 URL 中的查询参数部分。

  // 创建一个新的 URLSearchParams 对象
  var params = new URLSearchParams();
  params.append("name", "木木");
  params.append("age", "18");
  params.append("city", "北京");

  // 将参数转换为字符串
  console.log(params.toString()); // 输出: name=%E6%9C%A8%E6%9C%A8&age=18&city=%E5%8C%97%E4%BA%AC

  // 从现有查询字符串创建 URLSearchParams 对象
  var urlParams = new URLSearchParams("topic=javascript&page=1&size=10");
  console.log(urlParams.get("topic")); // 输出: javascript
  console.log(urlParams.has("page")); // 输出: true

  // 遍历所有参数
  for (const [key, value] of urlParams) {
    console.log(key, value);
  }

  // 修改参数
  urlParams.set("page", "2"); // 设置 page 为 2
  urlParams.delete("size"); // 删除 size 参数
  console.log(urlParams.toString()); // 输出修改后的查询字符串

  // 与 XMLHttpRequest 结合使用
  var xhr = new XMLHttpRequest();
  var searchParams = new URLSearchParams();
  searchParams.append("userId", "1");
  searchParams.append("completed", "false");

  xhr.open("GET", "https://jsonplaceholder.typicode.com/todos?" + searchParams.toString());
  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log("使用 URLSearchParams 构造的查询请求成功");
      console.log(JSON.parse(xhr.responseText));
    }
  };
  xhr.send();

  // 在 Fetch API 中使用 URLSearchParams
  fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: new URLSearchParams({
      title: "URLSearchParams测试",
      body: "这是使用URLSearchParams作为请求体的示例",
      userId: 1,
    }),
  })
    .then((response) => response.json())
    .then((data) => console.log("POST请求结果:", data));

  // 处理当前页面的查询参数
  var currentPageParams = new URLSearchParams(window.location.search);
  console.log("当前页面的所有查询参数:");
  for (const [key, value] of currentPageParams) {
    console.log(key + ": " + value);
  }
</script>

实战

javascript 复制代码

//在fetch请求体中发送参数
var params = new URLSearchParams();
params.append("name", "MuMu");
params.append("age", "25");
console.log(params.toString()); // 输出: name=MuMu&age=25
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: params.toString(), // 发送URL编码的参数字符串
})
  .then(function (response) {
    if (!response.ok) {
      throw new Error("网络响应失败");
    }
    return response.json(); // 解析为JSON响应体
  })
  .then(function (data) {
    console.log("Fetch数据:", data);
  })
  .catch(function (error) {
    console.error("Fetch错误:", error);
  });