js jquery 获取url参数

JS Jquery 获取URL参数

1. 简介

在前端开发中，获取URL参数是一项常见的任务。URL参数是指URL中的查询字符串，即问号后的参数部分。例如，在以下URL中，id和name就是URL参数：

本文将详细介绍如何使用JS和Jquery来获取URL参数。

2. 获取URL参数的流程

下面是获取URL参数的一般流程：

journey
    title 获取URL参数的流程
    section 步骤
    获取URL
    解析URL参数
    提取指定参数值
    返回参数值

3. 实现步骤及代码

我们一步一步来实现获取URL参数的功能。

步骤 1：获取URL

首先，我们需要获取当前页面的URL。在JS中，可以使用window.location.href来获取当前页面的URL。

var url = window.location.href;

步骤 2：解析URL参数

接下来，我们需要解析URL参数。可以使用URLSearchParams对象或自己编写函数来解析URL参数。

使用URLSearchParams对象

URLSearchParams对象是用于处理URL参数的内置对象。使用它可以方便地获取URL参数。

var params = new URLSearchParams(url.search);

自定义函数解析URL参数

如果你不想使用URLSearchParams对象，可以编写一个自定义函数来解析URL参数。以下是一个简单的实现：

function parseURLParams(url) {
  var params = {};
  var paramStr = url.split('?')[1];
  if (paramStr) {
    var paramArr = paramStr.split('&');
    for (var i = 0; i < paramArr.length; i++) {
      var param = paramArr[i].split('=');
      params[param[0]] = decodeURIComponent(param[1]);
    }
  }
  return params;
}

var params = parseURLParams(url);

步骤 3：提取指定参数值

现在，我们已经得到了URL参数的对象形式，即params。如果想要获取指定参数的值，可以直接通过参数名访问。

var id = params.get('id');
var name = params.get('name');

步骤 4：返回参数值

最后，我们可以在控制台输出参数值，或者将其用于其他用途。

console.log('id:', id);
console.log('name:', name);

4. 完整代码

下面是整个过程的完整代码：

// 获取URL
var url = window.location.href;

// 解析URL参数
var params = new URLSearchParams(url.search);

// 提取指定参数值
var id = params.get('id');
var name = params.get('name');

// 输出参数值
console.log('id:', id);
console.log('name:', name);

5. 总结

通过以上步骤，我们已经学会了如何使用JS和Jquery来获取URL参数。首先，我们获取当前页面的URL，然后解析URL参数，提取指定参数的值，最后将其用于其他用途。这是一项在前端开发中非常实用的技能，希望这篇文章对你有所帮助。

参考链接：

• [URLSearchParams MDN 文档](