原生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中字符串拼接需注意的问题
Jul 13 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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,mssql,pg数据库操作类
2014/12/13 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
深入浅析python继承问题
2016/05/29 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python之随机数函数的实现示例
2020/12/30 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
《临死前的严监生》教学反思
2014/02/13 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
个人自荐材料
2014/05/23 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书