jQuery获取URL参数及添加参数的实现方法

作者：桌面漫游时间：2026-10-30 02:44:54浏览：603

本文详解利用jQuery获取URL参数的两种方法：原生JavaScript函数扩展与封装插件。重点解析正则表达式匹配逻辑，并针对中文参数乱码问题，指出encodeURI与decodeURI的对应关系。同时提供$.Request取值及$.UrlUpdateParams追加参数的完整代码实现。

在实际开发中，经常需要获取当前页面的URL地址以及解析其中的查询参数。本文将通过文字解析结合代码示例的方式，详细讲解如何使用jQuery及相关JavaScript技术完成这一任务。

获取完整URL地址

首先介绍如何获取完整的URL地址，这部分操作相对简单，核心代码如下：

复制代码

window.location.href;

这里主要利用了JavaScript原生的window对象属性，并未涉及jQuery的特殊语法，直接访问location.href即可获取当前页面的完整链接。

使用正则表达式提取参数

相比之下，从URL中提取特定参数较为复杂，通常需要借助正则表达式。因此，掌握JavaScript正则表达式的应用至关重要。

我们先看纯JavaScript环境下如何提取URL中的某个参数值：


  //获取url中的参数
  function getUrlParam(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
   var r = window.location.search.substr(1).match(reg); //匹配目标参数
   if (r != null) return unescape(r[2]); return null; //返回参数值
  }

通过定义一个函数并传入目标参数名，即可获取对应的参数值。例如，假设当前URL为：

http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx

若要获取参数reurl的值，调用方式如下：

复制代码

var xx = getUrlParam('reurl');

理解了原生JavaScript的提取逻辑后，我们可以将其封装为jQuery的扩展方法，从而通过jQuery链式调用获取参数。以下代码展示了如何为jQuery扩展getUrlParam()方法：


  (function ($) {
    $.getUrlParam = function (name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if (r != null) return unescape(r[2]); return null;
    }
   })(jQuery);

完成扩展后，即可通过jQuery的选择器语法直接获取参数值，示例如下：

复制代码

var xx = $.getUrlParam('reurl');

完整实现代码如下：


 <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function () {
   //方法二：
   (function ($) {
    $.getUrlParam = function (name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if (r != null) return unescape(r[2]); return null;
    }
   })(jQuery);
   //方法二：
   var xx = $.getUrlParam('reurl');
   //方法一：
   // var xx = getUrlParam('reurl');

   alert(xx);
  });
  //方法一：
  //获取url中的参数
  function getUrlParam(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
   var r = window.location.search.substr(1).match(reg); //匹配目标参数
   if (r != null) return unescape(r[2]); return null; //返回参数值
  }
 </script>

中文参数乱码问题与编码规范

2014-4-23 修改

在实际测试中发现，当URL中包含中文参数时，上述方法解析出的结果会出现乱码。经调试确认，问题在于传递参数时使用了encodeURI进行编码，而解析时却使用了unescape进行解码。将解码函数修改为decodeURI后，中文参数即可正常显示。

附：W3School相关文档说明：

JavaScript unescape() 函数

unescape() 函数用于对通过 escape() 编码的字符串进行解码操作。

参数	描述
string	必需。要解码或反转义的字符串。

说明

该函数通过识别形如 %xx 和 %uxxxx 的字符序列（其中x代表十六进制数字），将其替换为对应的Unicode字符 \u00xx 和 \uxxxx 来完成解码过程。

提示和注释

注意：ECMAScript v3 标准已移除 unescape() 函数并建议弃用，官方推荐使用 decodeURI() 和 decodeURIComponent() 替代。

综上所述，JavaScript中对参数进行编码和解码时，必须保持方法一致：

escape() 对应 unescape()

encodeURI() 对应 decodeURI()

encodeURIComponent() 对应 decodeURIComponent()

基于对象存储的取值与追加参数方法

此外，网上还有一种基于对象属性存储的JavaScript获取URL参数方法：


<script language="JavaScript" type="text/javascript"> 
function GetUrlParms() 
{
 var args=new Object(); 
 var query=location.search.substring(1);//获取查询串 
 var pairs=query.split("&");//在逗号处断开 
 for(var i=0;i<pairs.length;i++) 
 { 
  var pos=pairs[i].indexOf('=');//查找name=value 
   if(pos==-1) continue;//如果没有找到就跳过 
   var argname=pairs[i].substring(0,pos);//提取name 
   var value=pairs[i].substring(pos+1);//提取value 
   args[argname]=unescape(value);//存为属性 
 }
 return args;
}
var args = new Object();
args = GetUrlParms();
//如果要查找参数key:
if(args["id"]!=undefined)
{
//如果要查找参数key:
var value1 = args["id"] ;
alert(value1);
}</script>

jQuery获取URL参数及在URL中追加参数的实现


(function ($) {
 $.extend({
  Request: function (m) {
   var sValue = location.search.match(new RegExp("[\?\&]" + m + "=([^\&]*)(\&?)", "i"));
   return sValue ? sValue[1] : sValue;
  },
  UrlUpdateParams: function (url, name, value) {
   var r = url;
   if (r != null && r != 'undefined' && r != "") {
    value = encodeURIComponent(value);
    var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");
    var tmp = name + "=" + value;
    if (url.match(reg) != null) {
     r = url.replace(eval(reg), tmp);
    }
    else {
     if (url.match("[\?]")) {
      r = url + "&" + tmp;
     } else {
      r = url + "?" + tmp;
     }
    }
   }
   return r;
  }

 });
})(jQuery);

具体使用方法如下：

dev.zhang.com/IOF.Signup/index_uscn_chs.html?act=1

1、取值操作：

$.Request("act") = 1

2、在URL中追加参数：

$.UrlUpdateParams(window.location.href, "mid", 11111),

执行后，window.location.href将变为包含?mid=11111的新地址。

作者最新文章

Mock.js 拦截失效或数据格式错误的常见原因及排查

2026-11-05 10:11:59

Java和JavaScript名字像但没关系：辨析Java、JavaWeb与JS

2026-11-04 09:30:54

CodePen、JSFiddle与RunJS对比：哪款JS在线运行工具更适合你？

2026-11-03 16:46:57

JS 统计图渲染空白或报错怎么排查？常见问题解决指南

2026-11-03 09:49:40

flv.js 常见报错 MediaError 与解码失败排查指南

2026-11-02 10:29:29