原生JS实现$.param() 函数的方法


Posted in Javascript onAugust 10, 2018

由于遇到相关序列化的问题,但是vue项目中由于减少队jquery引用的限制,导致不能用$.param来序列化参数,所以写了如下方法用来解决相关问题,但由于考虑不全,可能存在判断不全或者代码冗余等情况,希望多提意见,多多改善

var personObj = {
 name:'cheny0815',
 age:24,
 c:[{
  id:1,
  name:2
 },{
  id:2,
  name:3
 }],
 other:{
  a:1,
  b:{
   c:2,
   d:{
    a:1,
    b:{
     e:1,
     f:2
    }
   }
  }
 },
}
var nextStr = '';
function changeDataType(obj){
 let str = ''
 if(typeof obj == 'object'){
  for(let i in obj){
   if(typeof obj[i] != 'function' && typeof obj[i] != 'object'){
    str += i + '=' + obj[i] + '&' ;
   }else if (typeof obj[i] == 'object'){
    nextStr = '';
    str += changeSonType(i, obj[i])
   }
  }
 }
 return str.replace(/&$/g, '');
}
function changeSonType(objName, objValue){
 if(typeof objValue == 'object'){
  for(let i in objValue){
   if(typeof objValue[i] != 'object'){
    let value = objName + '[' + i + ']=' + objValue[i];
    nextStr += encodeURI(value) + '&';
   }else{
    changeSonType(objName + '[' + i + ']', objValue[i]);
   }
  }
 }
 return nextStr;
}
var resultParam = $.param(personObj);
var resultMyself = changeDataType(personObj);
document.write('resultMyself===>' + resultMyself + '<br><hr>')
document.write('resultParam ===>' + resultParam + '<br><hr>')
document.write('resultMyself === resultParam ===>' + (resultMyself === resultParam))

结果如下:

原生JS实现$.param() 函数的方法

原生JS实现$.param() 函数的方法

总结

以上所述是小编给大家介绍的原生JS实现$.param() 函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 #Javascript
JavaScript创建对象的常用方式总结
Aug 10 #Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 #Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 #Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 #Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 #Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 #Javascript
You might like
php+xml编程之xpath的应用实例
2015/01/24 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
限制复选框的最大可选数
2006/07/01 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
基本DOM节点操作
2017/01/17 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python字符串循环左移
2019/03/08 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
理工类毕业自我鉴定
2014/02/20 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
大学生创业项目方案
2014/03/08 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
资料员岗位职责
2015/02/10 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
费用申请报告范文
2015/05/15 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫