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拖动技术 关于setCapture使用
Dec 09 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 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
php 获取本机外网/公网IP的代码
2010/05/09 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript中定义类的方法汇总
2014/12/28 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
对python的输出和输出格式详解
2018/12/08 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
学校领导班子对照检查材料
2014/09/24 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
平安家庭事迹材料
2014/12/20 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
看上去很美观后感
2015/06/10 职场文书
高中班主任心得体会
2016/01/07 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Python入门之使用pandas分析excel数据
2021/05/12 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
python数字类型和占位符详情
2022/03/13 Python