原生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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python自定义类并使用的方法
2015/05/07 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
12月红领巾广播稿
2014/02/13 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python