`
LoveLZY
  • 浏览: 57339 次
  • 性别: Icon_minigender_1
博客专栏
Group-logo
从零编写RPC框架
浏览量:0
社区版块
存档分类
最新评论

基于jquery把表单转成成json对象

阅读更多
最近前端框架修改,小伙伴希望能像以前写jsp一样使用 对象.属性作为表单元素的name值
    <form id="test-form"> 
  	<input name="a.b.c" value="abc">
  	<input name="a.b.d" value="abd">
  	<input name="x" value="x">
  	<input name="a.f" value="af">
  	<input name="y" value="0">
  	<input name="y" value="y2">
  	<input name="m[0].c" value="m0c">
 	<input name="m[0].d" value="m0d">
  	<input name="m[1].c" value="m1c">
	<input name="m[1].d" value="m1d"> 
    <input type="button" id="test-btn">
  </form>

我这种懒人第一反应肯定去找度娘,发现度娘居然没有,只好自己造了轮子。
   function form2Json(params){
	 var selector=params.form;
	 var values= $(selector).serializeArray();
	 var obj={};
	 for (var index = 0; index < values.length; ++index)    
    {    
       var temp=obj; //上一级     
       var n=values[index].name;  
       if(n.indexOf(".")>-1){  
           var arr=n.split(".");  
           for(var i=0;i<arr.length-1;i++){     
               if(arr[i].indexOf("[")>-1){  
                   var a=arr[i].substring(0,arr[i].indexOf("["));  
                   temp[a]=temp[a]||[];  
                   var y=arr[i].substring(arr[i].indexOf("[")+1,arr[i].indexOf("]"));  
                   temp[a][y]=temp[a][y]||{};  
                   temp=temp[a][y];  
               }else{  
                   temp[arr[i]]=temp[arr[i]] || {};     
                   temp=temp[arr[i]];  
               }  
           }
           temp[arr[arr.length-1]]=values[index].value;       
       }else{  
           if(obj[n] !==undefined && obj[n]!=null){  
              if( !$.isArray(obj[n])){  
                  var v=obj[n];  
                  obj[n]=[];  
                  obj[n].push(v);  
              }
              
              obj[n].push(values[index].value);  
           }else{   
               obj[n]=values[index].value;  
           }  
       }     
    }   	
	 return obj;
}


该轮子支持复杂对象,支持对象数组,支持简单属性
    $("#test-btn").on("click",function(){
	  var json=form2Json({
		  form:"#test-form"
	  });
	 console.log(json);
	 console.log(JSON.stringify(json));
  });



最终结果如下
{"a":{"b":{"c":"abc","d":"abd"},"f":"af"},"x":"x","y":["0","y2"],"m":[{"c":"m0c","d":"m0d"},{"c":"m1c","d":"m1d"}]}


0
1
分享到:
评论

相关推荐

    Java bean转换为Json Schema

    Java Bean转换为Json Schema是一种常见的数据转换操作,特别是在开发基于RESTful API的Web服务时,因为JSON Schema提供了数据验证和文档化的功能。Java Bean是Java编程中的一个概念,它是一类具有特定规则的POJO...

    Android使用Json与Asp.Net交互(上传/下载数据集)

    Asp.Net服务器端借用Newtonsoft.Json.dll进行直接把对象转换成成Json格式的字符串,或把Json字符串转换成类对象。该dll原本针对JavaScript进行的转换,对其中部分类作出了修改,并重新命名为AndroidConvert类。 注...

    json-lib完整架包

    //复合类型bean转成成json @Test public void testBeadToJSON(){ MyBean bean = new MyBean(); bean.setId("001"); bean.setName("银行卡"); bean.setDate(new Date()); List cardNum = new ArrayList(); ...

    ads如何转成成keilmdk

    在嵌入式开发领域,ADDS(ARM Development Studio)和Keil uVision MDK(Microcontroller Development Kit)是两种常见的开发环境,它们都用于编写、编译和调试基于ARM架构的微控制器程序。本文将详细讲解如何将ADS...

    PDF 离线转换 OFD 工具

    这通常意味着该程序是基于Windows操作系统设计的,并且已经包含了所有必要的转换功能,可以在本地计算机上执行,不需要依赖云端服务。 2. **选择待转换的PDF**: 在程序启动后,用户需要指定要转换的PDF文件。这...

    Unity Json读取存储

    LitJson是Unity中常用的Json解析和序列化库,它能够帮助我们快速地将C#对象转换为Json字符串,反之也可以将Json字符串转换为C#对象。在Unity项目中,将LitJson.dll放入Plugins文件夹,这样Unity引擎会在编译时自动...

    Chrome中JSON.parse的特殊实现

    ECMA 262 Edition5 中提供了原生的JSON支持,其中JSON.parse用来将字符串转成成json,见ECMA 262 Edition5 15.12.2。另见:字符串转换成json的三种方式

    jquery实现自定义树形表格的方法【自定义树形结构table】

    自定义树形表格的核心在于能够动态地创建出带有层次性的表格结构,这通常涉及到表格的动态生成以及对DOM(文档对象模型)的操作。在jQuery中,通过选择器可以非常方便地选中特定的DOM元素并对其进行操作。 首先,...

    实现灰度图、二值图、rgb之间的转化

    转换通常是基于阈值操作,低于阈值的像素设为0,高于或等于阈值的设为255。MATLAB中的`imbinarize`函数可以实现此功能,用户可以自定义阈值或选择自动阈值算法。 3. 灰度图的意义与操作: 灰度值代表了像素的亮度...

    41724260-胡成成1

    本报告主要介绍了胡成成同学基于Python的pyQt5库开发的一款简易图片编辑器(PhotoEdit)。这个项目旨在结合Python图形化界面和图像处理技术,提供基础的图片编辑功能,如滤镜应用、图像调整、尺寸修改和旋转等。 1....

    16进制转换成10进制

    在计算机科学和编程领域,不同进制之间的转换是基础且重要的知识。16进制(Hexadecimal)是一种逢16进一的计数系统,它使用16个符号(0-9和A-F)来表示数值。10进制是我们日常生活最常用的计数方式,从0到9,逢10进...

    多边形合并:使用 multiPolygon, polygon 方法进行合并

    多边形合并:使用 multiPolygon, polygon 方法进行合并,具体合并可以参考文章如下:https://zhuhukang.blog.csdn.net/article/details/133716577

    pb 日期函数

    根据给定文件的信息,我们可以梳理出与“pb 日期函数”相关的多个知识点。这些知识点主要集中在日期函数的应用、计算及转换上。以下是对各部分详细解释: ### 1. 获取年份的最后两位数字(Ф(ݲintls_yearزstring)...

    基于神经网络的歌声合成系统`内含数据集以及成成样本'环境搭建教程.zip

    在本教程中,我们将深入探讨如何搭建一个基于神经网络的歌声合成系统,该系统利用了提供的数据集和预训练模型。首先,我们需要了解歌声合成的基本原理,它涉及到将文本或音符转换为真实的人声输出。传统的歌声合成...

    初中语文文摘社会成成的理想世界

    9. **家庭教育的角色**:成成的母亲在教育过程中扮演了关键角色,她的理解和接纳态度影响了成成的成长,同时她也从学校中学习到了更有效的教育方法。 10. **社会包容性**:文章最后提到的社会对残疾人的普遍接受,...

    侯成成PWM可逆直流调速系统matlab仿真报告DOC.doc

    "侯成成PWM可逆直流调速系统matlab仿真报告DOC.doc" 本文档是关于侯成成PWM可逆直流调速系统的matlab仿真报告,主要内容涉及运动控制系统仿真、 PWM 直流单闭环调速系统的动态建模与仿真、比例积分调节器的设计和...

    《成成烽火》观后感.pdf

    《成成烽火》是一部以抗日战争为背景的影片,主要展现了成成中学师生在那个动荡的年代如何在战斗中学习、成长,并投身于抗日救国的洪流中。影片通过对历史事件的艺术再现,让我们深感今天和平生活的来之不易,同时也...

    基于分类-回归卷积神经网络...能源电力系统可靠性评估方法_邵成成.pdf

    针对这一问题,文章提出了基于分类-回归卷积神经网络(Classification-Regression Convolutional Neural Networks, CR-CNN)的新方法。 CR-CNN是一种深度学习模型,它结合了分类和回归两种任务的能力。在电力系统...

Global site tag (gtag.js) - Google Analytics