jquery serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
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() 方法通过序列化表单值来创建对象数组(名称和值)。的更多相关文章
- jquery serialize()方法可以序列化表单值为字符串
<form> <div><input type="text" name="a" value="1" id=&q ...
- jQuery ajax - serialize() 方法-输出序列化表单值
定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生 ...
- 用jquery可以用使用serialize()序列化表单值,那有没有什么方法可以将值填充到表单中呢? (一段不错的代码)
serialize()的作用,是生成一个类似这种格式的字符串用于ajax提交 a=&b=&c=.你想将值填写到表单,首先要有值,然后就是表单控件的id或者能唯一定位控件的属性.然后就$ ...
- jQuery serializeArray()方法改写多维对象以及自定义
jQuery客户端表单数据获取 jq在进行客户端表单数据获取我们通常用serialize或者是serizlizeArray(),两种方法,可是在serizlizeArray()返回的数据是一个数组,数 ...
- jquery中使用serialize() 序列化表单时 中文乱码问题
序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 1 原因:.serialize()自动调用了encodeURICo ...
- JQuery补充——获取与设置表单值
//写jQuery代码时注意前面一定要记得加$(function(){});,在文档加载完成后进行代码的编写 使用jQuery的表单对象属性来选择被选中的项::checked,详见文档选择器部分 根据 ...
- (笔记)JQuery扩展方法实现Form表单与Json互相转换
JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.to ...
- JQuery扩展方法实现Form表单与Json互相转换
1.把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters ...
- jQuery序列化表单数据 serialize()、serializeArray()及使用
1.serialize() 方法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素 ...
随机推荐
- JS内置对象练习(慕课网题目)
效果图: XXXX年XX月X日 星期X--班级总分为:81 格式要求: 1.显示打印的日期. 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间. 2.计算出该班级的平均分(保留整数). 同学 ...
- PMP项目管理学习笔记(6)——整合管理之制订项目管理计划
制订项目管理计划 输入:项目章程.组织过程资产.企业环境要素.计划过程的输出(): 工具:专家判断 输出:项目管理计划 项目管理计划使你在问题发生之前做出规划 你要在计划过程组中明确如何完成项目——因 ...
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
- Boxes And Balls(三叉哈夫曼编码)
题目 原题链接:http://codeforces.com/problemset/problem/884/D 现有一堆小石子,要求按要求的数目分成N堆,分别为a1.a2....an.具体的,每次选一个 ...
- Windows虚拟桌面
PROCESS_INFORMATION ProcessInfo; STARTUPINFO StartupInfo; HDESK hDesktop; HDESK hOriginalThread; HDE ...
- String s = “1a2a3a4a” 解码为 “1234”
将字符串 String s = “1a2a3a4a” 解码为 “1234” public class Program2 { public static void main(String[] args ...
- 2019西安多校联训 Day5
T1 光哥为了不让某初二奆佬恶心到我们而留下的火种 (貌似没这题平均分就100-了) 思路:就一横一竖让后就gztopa嘛 #include <bits/stdc++.h> using n ...
- STL源码分析与实现-stl_list容器
1. stl_list 介绍 今天我们来总结一下stl_List, 通过之前介绍单链表的文章,其实对链表的基本操作已经十分熟悉了,那对于stl_list,无非就是链表结构不一样,至于其中的增删改查的细 ...
- [CF] 950A Left-handers, Right-handers and Ambidexters
A. Left-handers, Right-handers and Ambidexters time limit per test1 second memory limit per test256 ...
- <Spring Cloud>入门四 Feign
1.Feign 之前使用的是Ribbon+RestTemplate调用,通过的是微服务的名字进行调用,实现负载均衡 但是为了满足接口编程,提供了Feign 2.实现 2.1引入坐标 在 ms-comm ...