原生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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
angularJS提交表单(form)
Feb 09 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
如何唤起类中的一个方法
2013/11/29 面试题
总裁岗位职责
2013/12/04 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
python如何做代码性能分析
2021/04/26 Python
react中props 的使用及进行限制的方法
2021/04/28 Javascript
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技