jquery 页面一加载获取url参数

原创

mob649e8167c4a3 2023-07-26 04:07:28 ©著作权

文章标签 字符串获取参数代码示例 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8167c4a3的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 页面一加载获取URL参数

在开发前端页面时，我们经常需要获取URL中的参数来进行一些操作或者展示不同的内容。本文将介绍如何使用jQuery在页面加载时获取URL参数的方法，并提供相关的代码示例。

获取URL参数的方法

获取URL参数的常用方法有两种：

使用window.location.search属性获取完整的URL查询字符串，然后使用正则表达式或者其他方法解析出参数值。
使用URLSearchParams对象来直接解析URL查询字符串中的参数。

我们将使用第二种方法，因为它更加简洁和可读。

使用URLSearchParams解析URL参数

URLSearchParams是一个内置的JavaScript对象，用于解析和操作URL的查询字符串。以下是获取URL参数的步骤：

创建一个新的URLSearchParams对象并将window.location.search作为参数传入。
使用get()方法获取特定参数的值。

下面是代码示例：

$(document).ready(function() {
  // 创建URLSearchParams对象
  var params = new URLSearchParams(window.location.search);
  
  // 获取参数值
  var id = params.get("id");
  var name = params.get("name");
  
  // 打印参数值
  console.log("id: " + id);
  console.log("name: " + name);
});

在上面的示例中，我们假设URL为`

封装为通用函数

为了提高代码的可复用性，我们可以将获取URL参数的逻辑封装为一个通用的函数。以下是一个示例：

function getUrlParam(param) {
  var params = new URLSearchParams(window.location.search);
  return params.get(param);
}

$(document).ready(function() {
  // 调用getUrlParam函数获取参数值
  var id = getUrlParam("id");
  var name = getUrlParam("name");
  
  // 打印参数值
  console.log("id: " + id);
  console.log("name: " + name);
});

现在，我们可以在任何需要获取URL参数的地方直接调用getUrlParam函数来获取参数值。