使用jquery获取url及url参数的方法及定义JQuery扩展方法

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>
复制代码

url中传递的中文参数在解析的时候无论怎么测试,获取的都是乱码。经过一番调试后发现,我再传递参数时,对汉字编码使用的是 encodeURI ,而上面的方法在解析参数编码时使用的是unescape ,修改为 decodeURI 就可以了

 C#获取Url及参数

        /// <summary>/// returns the url without the query and the query string as two seperate items/// </summary>/// <param name="url"></param>/// <returns>Item1:The url without the query string/// Item2:The query string if there was one or null</returns>private static string GetQueryStringFromUrl(string url){if (url == null){throw new ArgumentNullException("url");}var firstIndex = url.IndexOf("?");return firstIndex > -1 ? url.Substring(firstIndex + 1) : null;}/// <summary>/// returns the url without the query string if one is present else it returns the original url/// </summary>/// <param name="url"></param>/// <returns>The url without the query string or the original url if no query string was present</returns>private static string StripQueryString(string url){if (url == null){throw new ArgumentNullException("url");}var firstIndex = url.IndexOf("?");return firstIndex > -1 ? url.Substring(0, firstIndex) : url;}

 

转载于:https://www.cnblogs.com/shy1766IT/p/5327027.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1851)vue之电商管理系统电商系统vue创建项目

1输入命令vue-ui 2点击创建 3初始化 4手动配置项目 点击创建项目 创建完成 安装插件 点击安装即可 配置插件 点击依赖 安装依赖

在Google Maps 上点击标签后显示说明

JS如下&#xff1a; (function() { window.onload function() { // Creating an object literal containing the properties // you want to pass to the map var options { zoom: 3, center: new google.maps.LatLng(37.09, -95.71), mapTypeId: google.maps.MapTypeId.RO…

前端学习(1851)vue之电商管理系统电商系统配置ssh

1登录到码云 2设置 生成公钥 3添加公钥 验证成功

前端学习(1852)vue之电商管理系统电商系统托管码云上

1新建仓库 2执行命令 3添加git add . 3git add files 提交

前端学习(1853)vue之电商管理系统电商系统之git安装

1下载安装包 git官网&#xff1a; https://git-scm.com/download/win git阿里镜像&#xff1a; https://npm.taobao.org/mirrors/git-for-windows/ 2安装 基本傻瓜程序 上图红框内的选项是默认勾选的&#xff0c;建议不要动。绿色框1是决定是否在桌面创建快捷方式的。绿色框…

Beaglebone Black教程Beaglebone Black的引脚分配

Beaglebone Black教程Beaglebone Black的引脚分配 Beaglebone Black的引脚分配 绝大多数的微型开发平台都提供了一些称为GPIO的输入输出端口。这些端口可以让你使用软件和硬件来控制一些电子的东西&#xff0c;每个端口都被赋予了一个特定的功能——模拟或数字。大多数的微控制…

iOS Social框架

现在很多应用都内置“社交分享”功能&#xff0c;可以将看到的新闻、博客、广告等内容分享到微博、微信、QQ、空间等&#xff0c;其实从iOS6.0开始苹果官方就内置了Social.framework专门来实现社交分享功能&#xff0c;利用这个框架开发者只需要几句代码就可以实现内容分享。下…

前端学习(1856)vue之电商管理系统电商系统之安装mysql出现mysql报错:Can’t start server: Bind on TCP/IP port: 通常每个套接字地址(协议/网络地址

2020-07-26T11:44:29.778919Z 0 [ERROR] [MY-010262] [Server] Cant start server: Bind on TCP/IP port: 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。

简单存取款机的实现---控制输入变量的规则

转载于:https://www.cnblogs.com/quanby/p/5335527.html

前端学习(1854)vue之电商管理系统电商系统之安装mysql

本地安装好数据库 source导入命令 source d:/mydb.sql

[原]Jenkins(十二)---jenkins管理员用户无法登陆解决办法Access Denied

/** * lihaibo * 文章内容都是根据自己工作情况实践得出。 *如有错误&#xff0c;请指正 * 版权声明&#xff1a;本博客欢迎转发&#xff0c;但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5337295.html */ 一、问题出现的原因&#xff1a; 如下图&#xff0c;在…

前端学习(1859)vue之电商管理系统电商系统之梳理项目结构

vue ui打开 app.vue <template><div id"app">app根组件</div> </template><script>export default {name: app,} </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: a…

前端学习(1860)vue之电商管理系统电商系统之渲染login组件并且实现路由重定向

vue ui打开 app.vue <template><div id"app"><router-view></router-view></div> </template><script>export default {name: app,} </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-s…

CAEmitterLayer实现粒子效果

在iOS 5中&#xff0c;苹果引入了一个新的CALayer子类叫做CAEmitterLayer。CAEmitterLayer是一个高性能的粒子引擎&#xff0c;被用来创建实时例子动画如&#xff1a;烟雾&#xff0c;火&#xff0c;雨等等这些效果。 CAEmitterLayer看上去像是许多CAEmitterCell的容器&#xf…

前端学习(1861)vue之电商管理系统电商系统之设置背景色并在中央绘制登录盒子

1安装less_loader依赖 2安装less 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) logi…

前端学习(1862)vue之电商管理系统电商系统之绘制默认头像

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1863)vue之电商管理系统电商系统之绘制登录表单区域

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1864)vue之电商管理系统电商系统之绘制登录表单区域带icon的输入框

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…