原生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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 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文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python类参数self使用示例
2014/02/17 Python
python杀死一个线程的方法
2015/09/06 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python使用RNN实现文本分类
2018/05/24 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
一道SQL面试题
2012/12/31 面试题
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书