原生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
Nov 25 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 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的配置文件php.ini
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Django安装配置mysql的方法步骤
2018/10/15 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
工程师求职简历的自我评价分享
2013/10/10 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
经济管理专业求职信
2014/06/09 职场文书
购房意向书
2014/08/30 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
怎么写工作检讨书
2014/11/16 职场文书
打架检讨书范文
2015/01/27 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis