原生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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jquery.post用法示例代码
Jan 03 Javascript
node.js从数据库获取数据
May 08 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
原生js开发的日历插件
Feb 04 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
取消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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
使用js简单实现了tree树菜单
2013/11/20 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python pdb调试方法分享
2014/01/21 Python
Python写的贪吃蛇游戏例子
2014/06/16 Python
跟老齐学Python之网站的结构
2014/10/24 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python 类的继承实例详解
2017/03/25 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python属于跨平台语言码
2020/06/09 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
教师网络培训感言
2014/03/09 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
实验心得体会
2014/09/05 职场文书
离婚协议书范文2015
2015/01/26 职场文书
高中家长意见怎么写
2015/06/03 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS