原生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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
取消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
Smarty安装配置方法
2008/04/10 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python中for循环详解
2014/01/17 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
如何将python中的List转化成dictionary
2016/08/15 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python实现二维数组的对角线遍历
2019/03/02 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
《巨人的花园》教学反思
2014/02/12 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书