jquery的.serializeArray()方法可以获取形如以下

[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
]

name value组成的对象数组,如果我们想得到key为name,value为value的json对象,则如下转换:

var m = {};
$.each($("form").serializeArray(), function(i, field){
m[field.name]=field.value;
});

但是这么转换有一个弊端,就是checkbox,复选框有多个name相同的值,最后只留下了最后一个,如果想把复选框多个name相同的值存为数组,有一个解决办法是办json对象的值全变为数组类型,如下:

var m = {};
$.each($(v).find(".panel-body form").serializeArray(), function(i, field){
if(!m.hasOwnProperty(field.name)){
m[field.name]=[];
}
m[field.name].push(field.value)
});

这样可以保证复选框的值存为一个数组,但是其他值要通过 m.key[0]来获取了。

这里注意,在页面中除了单选按钮  复选框写多个相同的name值以外,其他不要出现name相同的表单哦。

jquery方法.serializeArray()还有一个弊端,就是不能获取input file添加的图片元素。

jquery方法.serializeArray()获取name和value并转为json数组的更多相关文章

  1. jquery获取表单数据方法$.serializeArray()获取不到disabled的值

    $.serializeArray()获取不到disabled的值 经实验,$.serializeArray()获取不到disabled的值,如果想要让input元素变为不可用,可以把input设为re ...

  2. .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  3. C#拼装JSON数组简易方法

    下面是我们想要拼接出来的JSON字符串,返回给前台 {"success":"true","msg":"","d ...

  4. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  5. jquery尺寸和jQuery设置和获取内容方法

    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...

  6. jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法

    当提交的表单元素较多时用serialize()方法,serialize()方法也是作用于一个jQuery的对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. serialize() 方法通 ...

  7. 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。

    在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...

  8. 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  9. jQuery ajax - serializeArray() 方法

    定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. ...

随机推荐

  1. iOS微信支付demo运行报错解决如下

    要接入微信支付的小伙伴,首先要下载一份官方demo(APP微信支付官方Demo下载),然后打开工程,准备大干一场. 1.编译报错 编译的时候居然直接报错了(orz) 错误提示: APP微信支付官方De ...

  2. java结合js获取验证码

    框架springmvc 1.后台java代码: package com.fh.controller.system.secCode; import java.awt.Color; import java ...

  3. Flask简介,安装,demo,快速入门

    1.Flask简介 Flask是一个相对于Django而言轻量级的Web框架. 和Django大包大揽不同,Flask建立于一系列的开源软件包之上,这其中 最主要的是WSGI应用开发库Werkzeug ...

  4. [转]bootstrap table本地数据使用方法

    原文地址:http://www.giserdqy.com/language/h5/bootstrap/1136 data对应columns进行组合 var columns = [ { field: ' ...

  5. 越狱机器SSH安装与使用

    SSH安装html, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror-scroll { ...

  6. [openssl]openssl特定版本安装

    卸载旧版本 OpenSSL1. apt-get purge openssl2. rm -rf /etc/ssl #删除配置文件编译与安装 OpenSSLprefix 是安装目录,openssldir ...

  7. VMware下的Centos7联网并设置固定IP

    安装CentOS7之后总得联网呀,而且不能一直连服务器,我们需要一个其他工具连它,所以一个固定IP也很重要了. 工具/原料   CentOS7 VMware 方法/步骤     首先设置vmware能 ...

  8. Spark内存管理之钨丝计划

    Spark内存管理之钨丝计划 1. 钨丝计划的产生的原因 2. 钨丝计划内幕详解  一:“钨丝计划”产生的本质原因 1, Spark作为一个一体化多元化的(大)数据处理通用平台,性能一直是其根本性的追 ...

  9. java File linux windows 下 绝对路径 相对路径问题

    前言 当前项目目录 windows 为  E:\project\testpro\ linux 为  /project/testpro/ Windows环境下获取绝对路径情况 使用 a/b/c 为路径, ...

  10. Ubuntu16.04安装Mininet

    Ubuntu16.04源码安装Mininet 本文介绍了VMware虚拟机ubuntu16.04中安装Mininet的方法,物理机中的方法与之相同.主要参考了Mininet官方的教程.官方提供了四种安 ...