jquery获取url参数及url加参数的方法


Posted in Javascript onOctober 26, 2015

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作,下面通过文字说明加代码分析的形式给大家解析,具体详情请看下文。

1、jquery获取url很简单,代码如下:

window.location.href;

其实只是用到了javascript的基础的window对象,并没有用jquery的知识。

2、jquery获取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中的参数名就可以获取到参数的值,比如url为

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

我们要获取reurl的值,可以这样写:

var xx = getUrlParam('reurl');

明白了javascript获取url参数的方法,我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数,下面的代码为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中的参数时,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

Javascript 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
小程序实现tab标签页
Nov 16 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
angular.bind使用心得
Oct 26 #Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 #Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 #Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 #Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 #Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
PHP 程序员应该使用的10个组件
2009/10/31 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
J2EE包括哪些技术
2016/11/25 面试题
应届生服务员求职信
2013/10/31 职场文书
行政部主管岗位职责
2013/12/28 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
Python 绘制多因子柱状图
2022/05/11 Python