Js+Jq获取URL参数的集中方法示例代码


Posted in Javascript onMay 20, 2014

JQ取值方法:

jquery本身也不存在取得URL参数的方法,但是已经存在插件,可以直接取得URL等参数
插件连接主页:https://github.com/allmarkedup/jQuery-URL-Parser
下载链接:http://download.github.com/allmarkedup-jQuery-URL-Parser-bb2bf37.zip

Examples of use
Using the current page's url (for these examples https://mysite.com/information/about/index.html?itemID=2&user=dave):

// get the protocol
jQuery.url.attr("protocol") // returns 'http'

// get the path
jQuery.url.attr("path") // returns '/information/about/index.html'

// get the host
jQuery.url.attr("host") // returns 'mysite.com'

// get the value for the itemID query parameter
jQuery.url.param("itemID") // returns 2

// get the second segment from the url path
jQuery.url.segment(2) // returns 'about'
Using a different url to the current page:

// set a different URL and return the anchor string
jQuery.url.setUrl("http://allmarkedup.com/category/javascript/#footer").attr("anchor") // returns 'footer'

JS原生获取:

最原始的JS方法:

var URLParams = new Array(); 
var aParams = document.location.search.substr(1).split('&'); 
for (i=0; i < aParams.length ; i++){ 
var aParam = aParams[i].split('='); 
URLParams[aParam[0]] = aParam[1]; 
}

这样调用:

http://127.0.0.1/index.php?name=name1&cid=123
//取得传过来的name参数
name=URLParams["name"];

document.write(name);
//取得传过来的cid

cid=URLParams["cid"];

正则分析法:

方法一:

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

这样调用:

alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); 
alert(GetQueryString("参数名3"));

方法二:
<span style="font-size: 16px;"><Script language="javascript"> 
function GetRequest() { 
var url = location.search; //获取url中"?"符后的字串 
var theRequest = new Object(); 
if (url.indexOf("?") != -1) { 
var str = url.substr(1); 
strs = str.split("&"); 
for(var i = 0; i < strs.length; i ++) { 
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
} 
} 
return theRequest; 
} 
</Script>

这样调用:
<Script language="javascript"> 
var Request = new Object(); 
Request = GetRequest(); 
var 参数1,参数2,参数3,参数N; 
参数1 = Request['参数1']; 
参数2 = Request['参数2']; 
参数3 = Request['参数3']; 
参数N = Request['参数N']; 
</Script>
Javascript 相关文章推荐
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
BootStrap中的表单大全
Sep 07 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
js 采用delete实现继承示例代码
May 20 #Javascript
js清空form表单中的内容示例
May 20 #Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 #Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 #Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 #Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 #Javascript
jQuery.holdReady()使用方法
May 20 #Javascript
You might like
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
Python 面试中 8 个必考问题
2018/11/16 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
Android面试宝典
2013/08/06 面试题
护理自我鉴定范文
2013/10/06 职场文书
给排水专业应届生求职信
2013/10/12 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
篝火晚会主持词
2014/03/25 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
自信主题班会
2015/08/14 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js