原生JS实现$.param() 函数的方法

 更新时间:2018年08月10日 10:53:42   转载 作者:Cheny0815  
这篇文章主要介绍了原生JS实现$.param() 函数的方法,由于遇到相关序列化的问题,但是vue项目中由于减少队jquery引用的限制,导致不能用$.param来序列化参数,下面小编给大家分享了实例代码,需要的朋友参考下吧

由于遇到相关序列化的问题,但是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() 函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • asp.net刷新本页面的六种方法总结

    asp.net刷新本页面的六种方法总结

    本篇文章主要是对asp.net刷新本页面的六种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 使用js实现的简单拖拽效果

    使用js实现的简单拖拽效果

    本文给大家分享的是使用纯JS实现的简单的拖拽效果的插件,算是对自己javascript学习的一个小的检验,如果小伙伴们需要复杂的拖拽效果,还是考虑jQuery的draggable吧,更成熟一些。
    2015-03-03
  • javascript随机变色实例代码

    javascript随机变色实例代码

    在本篇文章里小编给大家分享的是关于javascript随机变色的相关实例内容,需要的朋友们可以测试下。
    2019-10-10
  • js实现轮播图的完整代码

    js实现轮播图的完整代码

    这篇文章主要为大家详细介绍了js实现轮播图的完整代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 下载文件个别浏览器文件名乱码解决办法

    下载文件个别浏览器文件名乱码解决办法

    下载文件个别浏览器文件名乱码解决办法,需要的朋友可以参考一下
    2013-03-03
  • javascript常见数字进制转换实例分析

    javascript常见数字进制转换实例分析

    这篇文章主要介绍了javascript常见数字进制转换,结合实例形式分析了JavaScript十进制,十六进制及二进制的相互转换原理与技巧,需要的朋友可以参考下
    2016-04-04
  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    微信小程序 获取手机号 JavaScript解密示例代码详解

    这篇文章主要介绍了微信小程序 获取手机号 JavaScript解密的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • javascript中mouseenter与mouseover的异同

    javascript中mouseenter与mouseover的异同

    javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover:鼠标移入监听对象中,或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter:鼠标移入监听对象时触发,在监听对象内移动不会触发。
    2017-06-06
  • Javascript调用函数方法的几种方式介绍

    Javascript调用函数方法的几种方式介绍

    这篇文章主要介绍了Javascript调用函数方法的几种方式介绍,本文讲解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5种方式,需要的朋友可以参考下
    2015-03-03
  • 学习使用bootstrap3栅格系统

    学习使用bootstrap3栅格系统

    这篇文章主要教会大家学习使用bootstrap3栅格系统,bootstrap开发环境搭建,还介绍了栅格系统的类型,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论