如何将URL中的GET参数赋值给forms.html的valPost变量？

要提取URL中的GET参数并赋值给valPost变量，你可以用以下几种方法：

现代浏览器推荐方案（URLSearchParams API） #

这是最简洁且原生支持的方法，适用于大多数现代浏览器：

// 解析当前页面URL的查询参数
const urlParams = new URLSearchParams(window.location.search);

// 方式1：将参数转为普通对象（方便直接访问属性）
const valPost = Object.fromEntries(urlParams);
// 此时 valPost.fname === 'Harold'，valPost.lname === 'Smith'

// 方式2：直接保留URLSearchParams对象（适合需要调用其方法的场景）
// let valPost = urlParams;
// 可以通过 valPost.get('fname') 获取对应值

兼容旧浏览器的自定义解析函数 #

如果需要兼容IE等不支持URLSearchParams的浏览器，可以自己实现参数解析：

function parseUrlParams() {
  const params = {};
  // 获取?后的参数部分并去掉开头的?
  const searchStr = window.location.search.slice(1);
  if (!searchStr) return params;
  
  // 按&分割每个参数键值对
  const paramPairs = searchStr.split('&');
  paramPairs.forEach(pair => {
    // 分割键和值，同时解码URL编码的内容
    const [key, value] = pair.split('=').map(decodeURIComponent);
    if (key) params[key] = value || '';
  });
  return params;
}

// 赋值给valPost
const valPost = parseUrlParams();

不管是通过AJAX请求还是直接访问URL传递的GET参数，以上方法都能正常提取参数值，和请求发起方式无关。

内容的提问来源于stack exchange，提问作者Mr. Coz