serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

html代码:

<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>

jquery代码:

$('form').submit(function() {
console.log($(this).serializeArray());
return false;
});

将产生以下数据结构(浏览器提供的console.log):

[
{
name: "a",
value: "1"
},
{
name: "b",
value: "2"
},
{
name: "c",
value: "3"
},
{
name: "d",
value: "4"
},
{
name: "e",
value: "5"
}
]

实际应用例子,通过ajax把表单数据上传给服务器:

            var formdataArr = $(form).serializeArray();
var formdata = {};
for (var i = 0; i < formdataArr.length; i++) {
if(formdataArr[i]['name'] == "editorValue"){
continue;
} formdata[formdataArr[i]['name']] = formdataArr[i]['value'];
};
$.ajax({
url: '/cases/submit',
type: 'post',
dataType: 'json',
data: formdata,
success: function(data){ if(data.r == "0"){
bootbox.alert({
message: data.msg || "恭喜,提交保存成功",
callback: function() {
document.location.href = "/cases/showCaseList";
}
});
return false;
}else{
bootbox.alert(data.msg || "抱歉,提交保存失败");
return false;
}
},
error: function(){
bootbox.alert("抱歉,网络繁忙,请稍后再试");
}
});

jquery serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。的更多相关文章

  1. jquery serialize()方法可以序列化表单值为字符串

    <form> <div><input type="text" name="a" value="1" id=&q ...

  2. jQuery ajax - serialize() 方法-输出序列化表单值

    定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生 ...

  3. 用jquery可以用使用serialize()序列化表单值,那有没有什么方法可以将值填充到表单中呢? (一段不错的代码)

    serialize()的作用,是生成一个类似这种格式的字符串用于ajax提交 a=&b=&c=.你想将值填写到表单,首先要有值,然后就是表单控件的id或者能唯一定位控件的属性.然后就$ ...

  4. jQuery serializeArray()方法改写多维对象以及自定义

    jQuery客户端表单数据获取 jq在进行客户端表单数据获取我们通常用serialize或者是serizlizeArray(),两种方法,可是在serizlizeArray()返回的数据是一个数组,数 ...

  5. jquery中使用serialize() 序列化表单时 中文乱码问题

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 1 原因:.serialize()自动调用了encodeURICo ...

  6. JQuery补充——获取与设置表单值

    //写jQuery代码时注意前面一定要记得加$(function(){});,在文档加载完成后进行代码的编写 使用jQuery的表单对象属性来选择被选中的项::checked,详见文档选择器部分 根据 ...

  7. (笔记)JQuery扩展方法实现Form表单与Json互相转换

    JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.to ...

  8. JQuery扩展方法实现Form表单与Json互相转换

    1.把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters ...

  9. jQuery序列化表单数据 serialize()、serializeArray()及使用

    1.serialize() 方法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素 ...

随机推荐

  1. Backbone.js之Todo源码浅析

    相信每个接触了解过backbone的人都知道todo,网上的关于它的分析教程也都分析乱了.但是,知识只有自己学习领悟才是自己的,话不多说,正文开始. 在分析todo的源码之前,首先我们要知道todo具 ...

  2. qt5.5.1+vs2010发送邮件

    最近用到了这个功能,用于验证登陆~为此在网上找了好久,发现这方面的问答并不多!唯独这篇的解答实在.原文传送 1.首先选定自己的发送方的邮箱,无论是163还是qq邮箱等,首先都得开通SMTP服务:以16 ...

  3. 深入解析Web Services

    SOA,面向服务器建构,是一款架构,这几年虽然没前几年那么流行,但是还是有很多企业在用,而Web Services是目前适合做SOA的主要技术之一,通过使用Web Services,应用程序可以对外发 ...

  4. Winform用Post方式打开IE

    1.主要实现Code void OpenNewIe(string url, string postData)///url是要post的网址,postData是要传入的参数 { if (ie != nu ...

  5. Android(java)学习笔记171:服务(service)之绑定服务调用服务里面的方法

    1.绑定服务调用服务里面的方法,图解: 步骤: (1)在Activity代码里面绑定 bindService(),以bind的方式开启服务 :                     bindServ ...

  6. [转] 学习,思维三部曲:WHAT、HOW、WHY(通过现象看本质)

    https://www.douban.com/note/284947308/?type=like 学习技术的三部曲:WHAT HOW WHY 我把学习归类为三个步骤:What.How.Why.经过我对 ...

  7. flask_第一个程序

    安装flask sudo pip3 install flask falsk最小应用 from flask import Flask app = Flask(__name__) @app.route(' ...

  8. ubuntu卡机

    卡机了用ctrl+alt+t打开终端然后top看后台程序 最后kill -9 + PID就能把最影响问题的程序杀掉 我之前就杀了一个占100%cpu的程序

  9. const函数的使用

    const知道吗?解释其作用. 1.const 修饰类的成员变量,表示成员常量,不能被修改. 2.const修饰函数承诺在本函数内部不会修改类内的数据成员,不会调用其它非 const 成员函数. 3. ...

  10. 1、C编程预备计算机知识

    一.数据类型 基本数据类型 1.整数 整形 -- int -- 4 短整型 -- short int -- 2 长整型 -- long int --8 2.浮点数(实数) 单精度浮点数 -- floa ...