对于 URL,我们需要了解更多,因为我们的开发中可能会需要提取URL的部分信息来做不同的事情,事实上这也是与后端交互的一种独特的方式,当然这肯定是安全的,当请求被返回,关于 url 的信息就被记录在了 Window 对象的 Location对象中,取值的结果并不随着用户手动修改地址栏中的字符而发生任何改变,这一点是很重要的。了解了这些内容,那么我们从下面这张图开始吧:
图片中间那一行较长的字符串是一个完整的 URL,它包含了一个 URL 中可能包含的任何部分:协议、域名、端口号(当然,大多数情况下,我们在浏览网页的时候并没有看到端口号,因为他被隐藏了,默认就是80端口,你加上也不会有错)、路径、参数、描点。在 JavaScript 中,获取到这一行字符串的方法是访问 window.location.href,href属性包含了一个页面完整的 URL。如果想得到 URL 中某一部分的值,我们可以通过复杂、繁琐的正则表达式来解析这个完整的 URL,不过更方便的办法是通过 location
的其他属性来获取。比如 location 的 protocol 属性中记录了带冒号的协议名,pathname 属性存储着路径名,这些属性是 href 的分离,给开发者带来了很多方便。下面的表格中罗列了 location 下所有的属性,以及他们各自记录的值。如果不能理解表格中的内容,那么上面那张图中的色块和文字,形象地描述了各属性在 URL 中对应的位置。
属性
值
href |
完整的 URL |
protocol |
协议 |
hostname |
主机名 |
host |
主机名加端口号 |
port |
的端口号 |
pathname |
当前 URL 的路径部分 |
search |
URL 的查询部分 |
hash |
#开始的锚 |
值得注意的是,上面的属性都是可选的,这表示我们可以通过 JavaScript 改变他们的值。这些属性大都一目了然非常简单,唯有 search 部分是比较麻烦的,search部分是以 GET 方式传给后台的参数,以 ? 开始,& 作为分隔符,= 赋值的序列化的字符串,如此一来通过 location.search 得到的值往往并不是想要得到的最终结果,通过 search 的结构来分析,我们可能更想要得到的结果是一个包含明确对应关系的关联数组。于是我们需要对 location.search 中得到的字符串进行进一步的处理。
- functiongetArgs(){
-
varargs={};
-
varquery=location.search.substring(1);
-
-
varpairs=query.split("&");
-
-
for(vari=0;i<pairs.length;i++){
-
varpos=pairs[i].indexOf('=');
-
-
if(pos==-1)continue;
-
-
varargname=pairs[i].substring(0,pos);
-
varvalue=pairs[i].substring(pos+1);
-
value=decodeURIComponent(value);
- args[argname]=value;
-
- }
-
returnargs;
- }
上面的代码来自于《JavaScript 权威指南》一书中。getArgs 方法不接收参数,它主动提取 URL 中的 search 部分加以解析,并返回一个 JSON。例如我们最开始那张图片中的 URL ,使用 getArgs 方法将会得到下面的结果:
- varsearch={
- search:html
- }
这样,关于 URL 的所有信息都能得到一个非常明确的结果,很简单。
不过更推荐使用正则表达式来解析URL,其运行效率更高,代码也更加简洁。
- functiongetArgs(){
-
varargs={};
-
varmatch=null;
-
varsearch=decodeURIComponent(location.search.substring(1));
-
varreg=/(?:([^&]+)=([^&]+))/g;
-
while((match=reg.exec(search))!==null){
- args[match[1]]=match[2];
- }
-
returnargs;
- }.
转载地址:http://jsann.com/post/JS_GET_parameters_to_obtain.html
分享到:
相关推荐
封装了跟后台接口沟通的ajax,还有一个获取url传递get参数的两个公共函数,自己用来跟C#后台接口沟通的前端封装类,有类似需求的可以看看
jquery_query_js获取url参 使用方法 var id = $.query.get("Id"); 其中的Id是传过来的
此时可以使用js的方式得到当前页面的url中的get参数. 核心语句是: [removed].href 详细代码不解释了,有注释,你看了就懂.封装成jQuery扩展包. 代码如下: (function($){ $.extend({ /** * url get parameters * @...
1.传递参数: 代码如下: var pmt = ‘sensor=’+ encodeURI(encodeURI(sensor))+’&device=’+encodeURI(encodeURI(device))+’&instrument=’;...接收和解析参数 代码如下: //获取URL参数 function GetRequest()
下面通过一段代码给大家介绍js中获取URL参数的共用方法getRequest()方法,具体代码如下所示: getRequest : function() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); ...
方法一:正则分析法 代码如下: function getQueryString(name) { var reg = new RegExp(“(^|&)” + name + “=([^...GetQueryString(“参数名1”));alert(GetQueryString(“参数名2”)); alert(GetQuerySt
主要介绍了Javascript仿PHP $_GET获取URL中的参数代码实例,需要的朋友可以参考下
//获取url中的参数 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数 var result = [removed].search.substr(1).match(reg); // 对querystring匹配...
本文实例讲述了js获取url传值的方法。...这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: [removed] function GetRequest() { var url = locati
方法一:简单,得不到参数,只有一个虚拟路径 代码如下:GetUrl =request(“url”) ‘这个因为我们没有url=什么字样所以直接pass掉 方法二:得到整个URL,得到参数 代码如下:‘得到当前页面的地址 Function Get...
从A页面通过url传参到B页面时,解析url参数可以用下面两种方法: 方法一:正则分析法 代码如下: function getQueryString(name) { var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”); var r = ...
将URL中的参数提取出来作为对象的实现代码,适合希望获取url参数的朋友。
最近开发的项目需要用JavaScript读取Url字符串里的参数的值 通过查找资料和自己的试验,总算成功 ... //获取Url字串 var intPos = strHref.indexOf(“?”); // 参数开始位置 var strRight = strHref.substr(intPo
url paramter: 代码如下: //lastest: var getArgs=function() {//get url querystring var params=[removed].search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={}; while((temp=reg.exec(params))!=...
输出: [ 值1 , 值2, 值3…] 如果要获取多个相同名称中的某一个,可以这样: var arrayElement = $.query.get(‘testy[1]’); 此插件不仅能获取参数,也能设置参数。 设置一个参数: var newUrl = $.query.s
getQueryString方法默认返回的是 string如果是int类型,则JS使用的时候,要进行转换一下,下面有个不错的示例,大家可以参考下