原生JS实现$.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() 函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JSP用过滤器解决request getParameter中文乱码问题

    (1)客户端的数据一般是通过HTTP GET/POST方式提交给服务器,在服务器端用request.getParameter()读取参数时,很容易出现中文乱码现象. (2)用过滤器解决request中文乱码问题. (3)代码如下: package my; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class ChineseFilter implements Filter { //定义

  • 基于jsp:included的使用与jsp:param乱码的解决方法

    如果jsp:include 中的page页面存在乱码,则需要在使用<jsp:include page=""> 的页面中的<body>后加上<%    request.setCharacterEncoding('UTF-8") ;//或者指定的编码(GBK或其他)%>如下面所示: 复制代码 代码如下: jsp-include.jsp<%@ page language="java" contentType="

  • jsp ${param.id}用法

    它的取值范围Page,Request,Session,Application. ${param.id} 与输入有关,相对于 request.getParameter("id").意思是获得输入的参数id. 因为a.jsp提交到b.jsp过程中,id不属于Page,Request,Session,Application任何范围中的一个,所以取不到. 而id是a.jsp传给b.jsp的一个参数,所以${param.id}取到值. Request的范围是指一个jsp页面发送请求到另一个jsp

  • angularjs路由传值$routeParams详解

    angularjs路由传值$routeParams详解

    AngularJS利用路由传值,供大家参考,具体内容如下 1.导包 <script src="angular.min.js"></script> <script src="angular-route.js"></script> 2.依赖注入ngRoute var myapp=angular.module("myapp",["ngRoute"]); 3.配置路由 myapp.con

  • JSP中param标签用法实例分析

    本文实例分析了JSP中param标签用法.分享给大家供大家参考,具体如下: Jsp中param标签的使用 <jsp:param>操作被用来以"名-值"对的形式为其他标签提供附加信息.它和<jsp:include>.<jsp:forward>.<jsp:plugin>一起使用,方法如下: 复制代码 代码如下: <jsp:param name="paramName" value="paramValue&qu

  • js获得参数的getParameter使用示例

    复制代码 代码如下: function getParameter(name) { var reg = new RegExp((^&) + name + =([^&])(&$), i); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }

  • ExtJs3.0中Store添加 baseParams 的Bug

    复制代码 代码如下: this.store.on('beforeload', function() { Ext.apply(Ext.getCmp("propTypeGrid").store.baseParams, { 参数1: '111', 参数2: '111' }); }); 但是在 3.0 中这样无法增加参数,于是在 ExtJs官方论坛上找到了解决方案: 复制代码 代码如下: this.store.on('beforeload', function(store,options) {

  • 原生JS实现$.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 } } } }, }

  • 关于原生js中bind函数的简单实现

    今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • 原生js实现addClass,removeClass,hasClass方法

    本文分为两部分进行讲解,具体内容如下 第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' '

  • 原生JS简单实现ajax的方法示例

    本文实例讲述了原生JS简单实现ajax的方法.分享给大家供大家参考,具体如下: HTML部分: <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮,点击会触发click事件,click事件调用Ajax(

  • 原生JS实现图片无缝滚动方法(附带封装的运动框架)

    话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的. 我们来看看思路吧~ 首先我们要实现的效果有以下几点: 小圆点:点击小圆点显示与之对应的图片 向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动 定时器:每隔 2s 自动播放 主要难点在于: 当图片运动到最后一张,点击向右的按钮时,应该显示第一张: 当前显示的是第一张,点击向左的按钮时,应该显示最后一张:

  • 原生js封装的一些jquery方法(详解)

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

  • 浅谈js控制li标签排序问题 js调用php函数的方法

    浅谈js控制li标签排序问题 js调用php函数的方法

    [Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&

  • 原生JS封装_new函数实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始的new 首先,我们先new一个对象看看: //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',1

  • js的Map函数使用方法详解

    Map是ES2015引入的Global Object,Map对象中保存了键值对,且任何对象(包括原始值)都可以作为键或者值. 1. 构造函数 Map必须作为构造函数来使用, new Map([iterable]) 它的参数是可选的,如果提供的话,必须是一个iterable对象.iterable对象的迭代结果为,[key1, value1], [key2, value2], .... 例如 // 1. 数组是一个iterable对象 m = new Map([[1, 'a'], [2, 'b']]

随机推荐