原生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.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
异步加载script的代码
2011/01/12 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python使用剪切板的方法
2017/06/06 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python脚本开机自启的实现方法
2019/06/28 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
大学生学业生涯规划
2014/01/05 职场文书
语文教学随笔感言
2014/02/18 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
产品开发计划书
2014/04/27 职场文书
党支部活动策划方案
2014/08/18 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
初中班长竞选稿
2015/11/20 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers