JS对象转URL参数(原生JS和jQuery两种方式)
2017-03-22 09:44
513 查看
现在的JS框架将ajax请求封装得非常简单,例如下面:
上面是基于jQuery框架的一段ajax请求代码,使用了POST请求方式
但在某些场景中我们还是得使用GET方式,并且需要拼出请求参数,比如window.open时,a标签的href等等.像这种拼接字符串的代码很容易发生错误,比如要将一个对象的所有属性和值拼接为URL的请求参数,我们可能需要这样:
不用说太多,痛苦啊,就像苦力,一点也体会不到程序员高大上的感觉.或许,我们可以这样
既然这样,这是怎么实现的呢?先看一看网上一哥们基于jQuery的实现方案
引用自刘家华 http://www.oschina.net/code/snippet_139242_7584
由于是这段代码本身并不算多,为了增强其通用性,我使用了原生Javascript重写了该方法,如下:
$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); });
上面是基于jQuery框架的一段ajax请求代码,使用了POST请求方式
但在某些场景中我们还是得使用GET方式,并且需要拼出请求参数,比如window.open时,a标签的href等等.像这种拼接字符串的代码很容易发生错误,比如要将一个对象的所有属性和值拼接为URL的请求参数,我们可能需要这样:
var params = ''; params += 'key1='+obj.key1; params += 'key2='+obj.key2; params += 'key3='+obj.key3; params += 'key4='+obj.key4; ...
不用说太多,痛苦啊,就像苦力,一点也体会不到程序员高大上的感觉.或许,我们可以这样
var params = urlEncode(obj);
既然这样,这是怎么实现的呢?先看一看网上一哥们基于jQuery的实现方案
var parseParam=function(param, key){ var paramStr=""; if(param instanceof String||param instanceof Number||param instanceof Boolean){ paramStr+="&"+key+"="+encodeURIComponent(param); }else{ $.each(param,function(i){ var k=key==null?i:key+(param instanceof Array?"["+i+"]":"."+i); paramStr+='&'+parseParam(this, k); }); } return paramStr.substr(1); };
//test var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]}; parseParam(obj); //output: "name=tom&class.className=class1&classMates[0].name=lily" parseParam(obj,'stu'); //output: "stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily"
引用自刘家华 http://www.oschina.net/code/snippet_139242_7584
由于是这段代码本身并不算多,为了增强其通用性,我使用了原生Javascript重写了该方法,如下:
/** * param 将要转为URL参数字符串的对象 * key URL参数字符串的前缀 * encode true/false 是否进行URL编码,默认为true * * return URL参数字符串 */ var urlEncode = function (param, key, encode) { if(param==null) return ''; var paramStr = ''; var t = typeof (param); if (t == 'string' || t == 'number' || t == 'boolean') { paramStr += '&' + key + '=' + ((encode==null||encode) ? encodeURIComponent(param) : param); } else { for (var i in param) { var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i); paramStr += urlEncode(param[i], k, encode); } } return paramStr; }; var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]}; console.log(urlEncode(obj)); //output: &name=tom&class.className=class1&classMates[0].name=lily console.log(urlEncode(obj,'stu')); //output: &stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily
相关文章推荐
- JS对象转URL参数(原生JS和jQuery两种方式)
- JS对象转URL参数(原生JS和jQuery两种方式)
- 原生js和jquery两种方式实现tab切换
- js获取url参数值的两种方式
- js获取url中的参数,url中传递中文的时候通过js解码的方式
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- js获取url参数值的两种方式 4000
- js获取url参数值的两种方式
- jQuery对象与JS原生dom对象之间的转换
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
- js获取url参数值的两种方式
- 转:获取网页URL地址及参数等的两种方法(js和C#)
- js获取url参数值的两种方式
- 原生js和jquery两种处理cookie的插件介绍
- 获取网页URL地址及参数等的两种方法(js和C#)
- js获取url参数值的两种方式详解
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)