原生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里使用Dom操作Xml
Sep 20 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 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为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
党员国庆节演讲稿范文2014
2014/09/21 职场文书
人事任命通知书
2015/04/21 职场文书
地震捐款简报
2015/07/21 职场文书
2016教师节问候语
2015/11/10 职场文书
python基础之匿名函数详解
2021/04/21 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
Python使用Web框架Flask开发项目
2022/06/01 Python