原生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事件列表解说
Dec 22 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
详解jQuery中的easyui
Sep 02 jQuery
详解JavaScript添加给定的标签选项
Sep 17 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 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 Hex RGB颜色值互换的使用
2013/05/10 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
jQuery 表格插件整理
2010/04/27 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
浅谈js闭包理解
2019/04/01 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python socket实现简单聊天室
2018/04/01 Python
详解flask入门模板引擎
2018/07/18 Python
Python中的asyncio代码详解
2019/06/10 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
机械电子工程专业自荐书
2014/06/10 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
简爱读书笔记
2015/06/26 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
Python3.10的一些新特性原理分析
2021/09/15 Python