jQuery 获取 URL 参数

Shraddha Paghdar 2023年10月12日
jQuery 获取 URL 参数

在今天的文章中,我们将学习如何在 jQuery 中获取 URL 参数。

在 jQuery 中获取 URL 参数

在 JavaScript 中,Location 接口的 Search 属性是一个搜索字符串,也称为查询字符串;也就是说,一个包含 ? 的字符串后跟 URL 参数。

现代浏览器具有 URLSearchParamsURL.SearchParams 以降低解析问题字符串参数的难度。URLSearchParams 接口的 get() 技术返回与指定 search 参数关联的主要值。

语法:

get(name)

让我们通过以下简单示例来理解它。

let dummyURL =
    'https://delftstack.com/howto/jquery/?technology=jquery&post=urlParameter'
const extractURLParameter = (searchParam) => {
  const searchPageURL = dummyURL.split('?')[1];
  const searchURLVariables = searchPageURL.split('&');
  let searchParameterName;

  for (let i = 0; i < searchURLVariables.length; i++) {
    searchParameterName = searchURLVariables[i].split('=');

    if (searchParameterName[0] === searchParam) {
      return searchParameterName[1] === undefined ?
          true :
          decodeURIComponent(searchParameterName[1]);
    }
  }
  return false;
};


console.log(extractURLParameter('technology'));
console.log(extractURLParameter('post'));

const params =
    new URLSearchParams(window.location.search);  // pass the dummyURL here
const name = params.get('editor_console');
console.log(name)

在上面的示例中,我们定义了一个从当前位置 URL 中提取 URL 参数的通用函数。location 接口搜索属性从 URL 中提取参数和由 ? 分隔的值。

下一步是用&分割参数。现在我们可以遍历每个参数并检查请求的参数是否存在。

我们可以用 = 分隔参数和键。

第二种选择是直接使用 URLSearchParams 接口,它提供所有查询参数的列表。Get 方法提取与请求参数关联的值。

如果浏览器支持 URLSearchParams,这是一个有效的解决方案。

尝试在任何支持 jQuery 的浏览器中运行上面的代码片段。显示以下结果。

jquery
urlParameter

演示

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn