如何用JS获取当前页面GET参数？需用于后续XHR请求，弃用data-标签

嘿，我懂你不想用临时方案的心情——直接从当前URL里解析GET参数才是更规范、可持续的做法，下面给你几种靠谱的实现方式：

这是浏览器原生提供的标准API，专门用于处理URL查询参数，不用自己写复杂的解析逻辑，还能自动处理编码问题，非常省心。

// 从当前页面URL的查询部分创建URLSearchParams实例
const searchParams = new URLSearchParams(window.location.search);

// 获取单个参数值
const userId = searchParams.get('user_id');
const authToken = searchParams.get('auth_token');

// 直接在XHR请求中使用（GET请求示例）
const xhr = new XMLHttpRequest();
xhr.open('GET', `/api/user/profile?user_id=${userId}`);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 处理返回数据
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

// POST请求示例（参数放在请求体）
const postXhr = new XMLHttpRequest();
postXhr.open('POST', '/api/user/update');
postXhr.setRequestHeader('Content-Type', 'application/json');
postXhr.send(JSON.stringify({
  user_id: userId,
  auth_token: authToken
}));

优势：语法简洁、原生支持自动编码/解码、支持遍历参数（searchParams.forEach()）、添加/删除参数等操作，现代浏览器（Chrome、Firefox、Edge、Safari 10.1+）都支持。

如果你的项目需要兼容IE11及更早的浏览器，那可以自己写一个简单的解析函数：

function parseQueryParams() {
  const params = {};
  // 去掉URL开头的?，如果没有查询参数则返回空对象
  const queryString = window.location.search.slice(1) || '';
  // 按&拆分参数对
  const paramPairs = queryString.split('&');

  paramPairs.forEach(pair => {
    // 按=拆分键和值
    const [rawKey, rawValue] = pair.split('=');
    // 解码处理，避免中文或特殊字符乱码
    const key = decodeURIComponent(rawKey);
    const value = rawValue ? decodeURIComponent(rawValue) : '';
    params[key] = value;
  });

  return params;
}

// 使用示例
const queryParams = parseQueryParams();
const productId = queryParams.product_id;

// 应用到XHR请求
const xhr = new XMLHttpRequest();
xhr.open('GET', `/api/product/detail?id=${productId}`);
xhr.send();

这个方法手动处理了参数的拆分和解码，确保在旧浏览器里也能正常工作。

你之前用data-标签的做法确实属于临时方案，主要问题有两个：

• 数据冗余与不一致：URL参数是页面的原始数据源，把它存在data-标签里相当于复制了一份数据。如果用户手动修改URL参数、或者页面通过JS更新了URL，data-标签里的内容不会自动同步，很容易出现参数不一致的情况，导致XHR请求出错。
• 语义不符：data-标签的设计初衷是存储与DOM元素相关的自定义数据，而URL参数属于页面级的全局数据，放在data-标签里不符合语义规范。

内容的提问来源于stack exchange，提问作者arsrevoir