使用jquery获取url及url参数的简单实例


Posted in Javascript onJune 14, 2016

使用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参数的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
js的回调函数详解
Jan 05 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
JS操作JSON方法总结(推荐)
Jun 14 #Javascript
JavaScript Promise 用法
Jun 14 #Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 #Javascript
Javascript缓存API
Jun 14 #Javascript
JS修改地址栏参数实例代码
Jun 14 #Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 #Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 #Javascript
You might like
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
Laravel 5 学习笔记
2015/03/06 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
经管应届生求职信
2013/11/17 职场文书
经典洗发水广告词
2014/03/13 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python