从URL中提取参数与将对象转换为URL查询参数的实现代码

一、从URL中提取参数

有下列字符串:

var linkURL = 'http://localhost:8080/String/string_6.html?昵称=小西山子&age=24#id1';
对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些:


代码如下:

location.origin : http://localhost【域】
location.pathname : /project_js/Javascript/js_basic/demo/String/string_6.html【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,直接处理字符串。

提取字符串查询字符串之后,转化为对象的形式。

先讨论几种查询字符串的情况:

(1)?昵称=小西山子&age=24#id1 -->{昵称:'小西山子',age:'24'}

(2)?昵称&age=24#id1'; -->{昵称:undefined,age:'24'}

(3)?=小西山子&age=24#id1 -->{age:'24'}

(4)?昵称=小西山子=又一个&age=24&age=24#id1 -->{昵称:'小西山子=又一个',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];
console.log()
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

真实源码中用的是inject方法,不过在Enumerable部分,因此上面作了替换。

(0)

相关推荐

  • ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    1.先准备界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 300px; height: 200px;"> <table cellpadding="0" cellspacing="0" border="

  • ASP.NET中的URL过滤实现代码

    下面是类的定义. 复制代码 代码如下: using System; using System.Web; using System.Web.SessionState; namespace QTJZ {     public class Filters : IHttpModule, IRequiresSessionState     {         public void Dispose() { } public void Init(HttpApplication application)   

  • Asp.net中Request.Url的各个属性对应的意义介绍

    1.简单的环境搭建 在本地IIS上配置了一个网站:主机名为wjnhome.com,端口88,然后建了一个虚拟目录指向同一站点,虚拟目录名称为virtual,配置host为127.0.0.1 wjnhome.com 所以地址就为:http://jb51.net:88/virtual/urldemo.aspx?id=2#top 2.编写简单的代码 复制代码 代码如下: //虚拟目录的路径 Response.Write("<strong>Request.ApplicationPath:&l

  • 关于URL中的特殊符号使用介绍

    url即统一资源定位符,是通用资源标志符URI的一种. 由于有效的URI中不能包含某些字符,如空格等,如果不利用相应编码函数对URI进行编码(浏览器会对相应的URL进行处理),那么无法访问到有效的资源. javascript的Global对象(javascript的内置对象)中有四个URI方法,分别是encodeURI和decodeURI,encodeURIComponent和decodeURIComponent,浏览器模型(BOM)提供了escape和unescape.在实际应用中,URI方法

  • js分解url参数(面向对象-极简主义法应用)

    修改前: 复制代码 代码如下: <script type="text/javascript"> var url="www.taobao.com?key0=a&key1=b&key2=c"; function parseQueryString(url){ var str=url.split("?")[1], items=str.split("&"); var arr,name,value; f

  • URL中去除指定参数实现C#代码

    复制代码 代码如下: #region URL中去除指定参数 /// <summary> /// 中去除指定参数 /// </summary> /// <param name="url">地址</param> /// <param name="param">参数</param> /// <returns></returns> public static string bui

  • js URL参数的拼接方法比较

    最常见的方式就是: 复制代码 代码如下: url?arg1=value1&arg2=value2&arg3=value3... 这样的方式最常见最普通也最容易理解,但是在项目中,如果后面带的参数可变而且字段有不同的值或者不同的语义时,这样的方式可维护性和可读性其实并不高,而且代码也容易重复或者冗余. 比如下面的一个对CGI的请求串: 复制代码 代码如下: var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?"; var

  • 通过正则格式化url查询字符串实现代码

    看到项目里通过js数组split方法格式化查询字符串的,突发奇想为什么不能用正则呢,性能如何?于是便有了如下代码: 复制代码 代码如下: var url='www.baidu.com?a=123&b=456&c=789&e=dfsdfsdfsdfsdfsdfsdf&f=46545454545454785&g=e23232dsfvdfvdf'; /** * 格式化查询字符串(正则实现) * @param url url地址 * @return {Object} 格式化

  • asp.net获取URL和IP地址的方法汇总

    HttpContext.Current.Request.Url.ToString() 并不可靠. 如果当前URL为 http://localhost/search.aspx?user=http://csharp.xdowns.com&tag=%BC%BC%CA%F5 通过HttpContext.Current.Request.Url.ToString()获取到的却是 http://localhost/search.aspxuser=http://csharp.xdowns.com&tag=

  • js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s) //注意编码 需要注意的几点: 1.HttpUtility.UrlEncode,HttpUtility.UrlDecode是静态方法,而Server.UrlEncode,Server.UrlDecode是实例方法. 2.Server是HttpServerUtility类的实例,是System.Web.UI.Page的属性. 3.用HttpUtility.UrlEncode编码后的字符串和

  • js中将URL中的参数提取出来作为对象的实现代码

    复制代码 代码如下: (function() { var urlToObject = function(url) { var urlObject = {}; if (/\?/.test(url)) { var urlString = url.substring(url.indexOf("?")+1); var urlArray = urlString.split("&"); for (var i=0, len=urlArray.length; i<le

随机推荐