原生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知识点收藏
Feb 22 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP中phar包的使用教程
2017/06/14 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
htm调用JS代码
2007/03/15 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python批量解压zip文件的方法
2019/08/20 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python 实现多线程下载视频的代码
2019/11/15 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
教师应聘个人求职信
2013/12/10 职场文书
大学生村官任职感言
2014/01/09 职场文书
大型晚会策划方案
2014/02/06 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
公司外出活动方案
2014/08/14 职场文书
2015年植树节活动总结
2015/02/06 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python