原生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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
jquery cookie的用法总结
Nov 18 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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查询搜索引擎排名位置的代码
2010/01/05 PHP
php木马webshell扫描器代码
2012/01/25 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python与C/C++的相互调用案例
2021/03/04 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
房地产销售计划书
2014/01/10 职场文书
上课睡觉检讨书
2014/01/28 职场文书
出纳员的岗位职责
2014/02/22 职场文书
文化产业实施方案
2014/06/07 职场文书
元旦晚会活动总结
2014/07/09 职场文书
年终晚会活动方案
2014/08/21 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
自荐信格式范文
2015/03/04 职场文书
简历自我评价优缺点
2015/03/11 职场文书
护士旷工检讨书
2015/08/15 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android