原生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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Bootstrap基础学习
Jun 16 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
取消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
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PDO::getAttribute讲解
2019/01/28 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
港湾网络笔试题
2014/04/19 面试题
2015年度信用社工作总结
2015/05/04 职场文书
预备党员表决心的话
2015/09/22 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书