从URL中提取参数与将对象转换为URL查询参数
2016-08-02 15:25
363 查看
一、从URL中提取参数
有下列字符串:
对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些:
其中,与从URL中提取参数主要是用到location.search。不过为了通用,我们不去读取location.search,直接处理字符串。
提取字符串查询字符串之后,转化为对象的形式。
如果需要查询URL中某个参数的值,比如查询sourceId的值(60054),可以使用下面的函数:
先讨论几种查询字符串的情况:
(1)?name=haier&age=24#id1 -->{name:'haier',age:'24'}
(2)?name&age=24#id1'; -->{name:undefined,age:'24'}
(3)?=haier&age=24#id1 -->{age:'24'}
(4)?name=haier=again&age=24&age=24#id1 -->{name:'haier=again',age:['24','24']}
上面基本就是Prototype中toQueryParams的实现,上面有一个步骤是用'='分割参数,然后在value中再拼接。另外可以用substring来实现:
一、对象转换为URL查询参数
对象转换为URL查询参数就麻烦一点。不过由于是转换成查询参数形式,因此只能处理单层嵌套的对象,子对象就不能处理了。其原理就是toQueryParams的反向操作。
有下列字符串:
var linkURL = 'http://localhost:8080/pages/august.html?sourceId=60054&u_id=deaf';
对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些:
location.origin : http://localhost【域】 location.pathname : <span style="font-family: Arial, Helvetica, sans-serif;">/pages/august.html?sourceId=60054&u_id=deaf'</span>【URL路径】 location.host : localhost【主机+端口】 location.hostname : localhost【主机名】 location.port :【端口】 location.search : ?name=xesam【查询字符串】 location.hash : #age【锚点】 location.href : http://localhost/project_js/Javascript/js_basic/demo/String/string_6.html?name=xesam#age【完整形式】 location.protocol : http【协议】
其中,与从URL中提取参数主要是用到location.search。不过为了通用,我们不去读取location.search,直接处理字符串。
提取字符串查询字符串之后,转化为对象的形式。
如果需要查询URL中某个参数的值,比如查询sourceId的值(60054),可以使用下面的函数:
/* 获取URL中的数据*/ getParameter: function(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; },
先讨论几种查询字符串的情况:
(1)?name=haier&age=24#id1 -->{name:'haier',age:'24'}
(2)?name&age=24#id1'; -->{name:undefined,age:'24'}
(3)?=haier&age=24#id1 -->{age:'24'}
(4)?name=haier=again&age=24&age=24#id1 -->{name:'haier=again',age:['24','24']}
function toQueryParams(){ var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/);//提取location.search中'?'后面的部分 if(!search){ return {}; } var searchStr = search[1]; var searchHash = searchStr.split('&'); var ret = {}; for(var i = 0, len = searchHash.length; i < len; i++){ //这里可以调用each方法 var pair = searchHash[i]; if((pair = pair.split('='))[0]){ var key = decodeURIComponent(pair.shift()); var value = pair.length > 1 ? pair.join('=') : pair[0]; if(value != undefined){ value = decodeURIComponent(value); } if(key in ret){ if(ret[key].constructor != Array){ ret[key] = [ret[key]]; } ret[key].push(value); }else{ ret[key] = value; } } } return ret; } console.dir(toQueryParams.call(linkURL));
上面基本就是Prototype中toQueryParams的实现,上面有一个步骤是用'='分割参数,然后在value中再拼接。另外可以用substring来实现:
function toQueryParams(){ var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/); if(!search){ return {}; } var searchStr = search[1]; var searchHash = searchStr.split('&'); var ret = {}; searchHash.forEach(function(pair){ var temp = ''; if(temp = (pair.split('=',1))[0]){ var key = decodeURIComponent(temp); var value = pair.substring(key.length + 1); if(value != undefined){ value = decodeURIComponent(value); } if(key in ret){ if(ret[key].constructor != Array){ ret[key] = [ret[key]]; } ret[key].push(value); }else{ ret[key] = value; } } }); return ret; } console.dir(toQueryParams.call(linkURL));
一、对象转换为URL查询参数
对象转换为URL查询参数就麻烦一点。不过由于是转换成查询参数形式,因此只能处理单层嵌套的对象,子对象就不能处理了。其原理就是toQueryParams的反向操作。
function toQueryPair(key, value) { if (typeof value == 'undefined'){ return key; } return key + '=' + encodeURIComponent(value === null ? '' : String(value)); } function toQueryString(obj) { var ret = []; for(var key in obj){ key = encodeURIComponent(key); var values = obj[key]; if(values && values.constructor == Array){//数组 var queryValues = []; for (var i = 0, len = values.length, value; i < len; i++) { value = values[i]; queryValues.push(toQueryPair(key, value)); } ret = ret.concat(queryValues); }else{ //字符串 ret.push(toQueryPair(key, values)); } } return ret.join('&'); } console.log(toQueryString({ name : 'xesam', age : 24 })); //name=xesam&age=24 console.log(toQueryString({ name : 'xesam', age : [24,25,26] })); //name=xesam&age=24&age=25&age=26
相关文章推荐
- 从URL中提取参数与将对象转换为URL查询参数的实现代码
- 从URL中提取参数与将对象转换为URL查询参数的实现代码
- 从URL中提取参数与将对象转换为URL查询参数
- JSON对象转换成url参数
- URL参数转换对象
- 某人要的将url参数转换成对象的方法parseQueryString
- JS根据key值获取URL中的参数值,以及把URL的参数转换成json对象
- url参数转换为ruby对象时,rails框架使用的方法
- 将url的查询参数解析成字典对象
- 将URL中的参数提取出来作为对象
- JS根据key值获取URL中的参数值及把URL的参数转换成json对象
- 五三、提取浏览器 url 中的参数名和参数值,生成一个key/value 的对象
- 将url的查询参数解析成字典对象
- 将url的查询参数解析成字典对象
- 将url的查询参数解析成字典对象
- 将url的查询参数解析成字典对象
- 根据自定义参数名称查询自定义值,并把查到的自定义值转换成一个List对象
- js中将URL中的参数提取出来作为对象的实现代码
- js中将URL中的参数提取出来作为对象的实现代码
- c# model对象转换为url的参数形式