form表单序列化为Jquery对象
<form id="DailyFinancial" > @*class="form-inline"*@
<div class="form-group">
<label for="FinancialType">记账类型</label>
<select class="form-control" id="FinancialType" name="FinancialType">
<option value="1">支出</option>
<option value="2">收入</option>
</select>
</div>
<div class="form-group">
<label for="FinancialType">收支类型</label> <select class="form-control" id="Type" name="Type">
<option value="10">吃饭</option>
</select>
<p class="help-block" style="color:red">收支类型->花钱和赚钱方式</p>
</div>
<div class="form-group">
<label for="Money">金额</label>
<input type="text" class="form-control" id="Money" name="Money" placeholder="人民币">
</div>
<div class="form-group">
<label for="Detail">收支明细</label>
<textarea class="form-control" rows="2" id="Detail" name="Detail"></textarea>
</div>
<div class="form-group">
<label for="PayType">支出类型</label> <select class="form-control" id="PayType" name="PayType">
<option value="0">信用卡</option>
</select>
</div>
<div class="form-group">
<label for="Remark">备注</label>
<textarea class="form-control" rows="2" id="Remark" name="Remark"></textarea>
</div>
<div class="form-group">
<label for="Remark2">备注</label>
<textarea class="form-control" rows="2" id="Remark2" name="Remark"></textarea>
</div>
</form>
var o = {};
var arr = $("#DailyFinancial").serializeArray();// 直接序列化成对象数组,每个对象由name和value组成
$.each(arr,function (i,v) {
if (o[this.name]) {
if (!o[this.name].push) { //判断o[this.name]的值是否为数组,true表示数组,false表示不是数组
o[this.name] = [o[this.name]]; //o[this.name]的值设置为数组
}
o[this.name].push(this.value || ''); //在数组后追加新的元素
}else {
o[this.name] = this.value || '';
}
});
console.log(o);
用 $("#DailyFinancial").serializeArray()把form表单的值序列化成对象数组;
用$.each函数遍历数组,遍历每个对象(如果存在重复的name,则他的值用数组来接受)组装成jQuery对象
浏览器打印结果如下:Object {FinancialType: "1", Type: "10", Money: "", Detail: "", PayType: "0"…}
注:!o[this.name].push ->当属性的值不是数组时,结果显示为undifined,如果是数组时,返回的结果是:function push() { [native code] },所以这个判断是为了避免form表单标签有重复name时,他们的值都可以获取的到。
form表单序列化为Jquery对象的更多相关文章
- jQuery form表单序列化为JSON对象!
/* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
- 023-将表单序列化为json对象
使用jQuery将表单序列化为json对象,其中serializeJson方法的名字任意,serializeArray()这个jQuery提供的方法.this指的就是谁调用了这个方法. $.fn.se ...
- form表单序列化为json格式数据
在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...
- 将表单序列化为JSON对象
将表单序列化为JSON对象的工具方法: $(function() { //工具方法,可以将指定的表单中的输入项目序列化为JSON数据 $.fn.serializeJson = function() { ...
- Jquery 将表单序列化为Json对象
大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...
- 拓展jQuery的serialize(),将form表单转化为json对象
jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...
- js 表单序列化为json对象
$.fn.serializeJson = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () ...
- From 表单序列化为json对象(代码片段)
$.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...
随机推荐
- Android项目-高考作文项目架构(二)
1, 普通的http json请求 请看下面架构草图: 这样就抽象出了其他Activity可能需要的Http Json请求的功能. 只要其他Activity有Http Json请求的需求都可以继承Ba ...
- Linux进程实践(4) --wait避免僵尸进程
Wait的背景 当子进程退出的时候,内核会向父进程发送SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) 子进程退出时,内核将子进程置为僵尸状态,这个进程称为僵尸进程 ...
- Spring揭秘读书笔记 八 数据访问异常体系
这篇博客 来自spring揭秘一书的第十三章 为什么要有访问异常都有一个体系,这个我们得从DAO模式说起. DAO模式 任何一个系统,不管是一个最简单的小系统,还是大规模的系统,都得跟数据打交道,说白 ...
- 高通 MSM8K bootloader 之四: ramdump
前面说过高通平台,系统crash发生时,抓取crash ramdump非常重要,否则很难定位crash原因. 平台默认抓取ramdump的方法都有很强的局限性,如下: 1.PC端工具QPST提供的 M ...
- unity shaderlab Blend操作
原文链接: http://www.tiankengblog.com/?p=84 Blend混合操作是作用于在所有计算之后,是Shader渲染的最后一步,进行Blend操作后就可以显示在屏幕上.shad ...
- Linux学习笔记 --iptables防火墙配置
iptables防火墙配置 一.防火墙简介 1.功能: 1)通过源端口,源IP地址,源MAC地址,包中特定标记和目标端口,IP,MAC来确定数据包是否可以通过防火墙 2)分割内网和外网[附带的路由器的 ...
- 【单片机】基于有方GPRS的智能电梯控制系统
前一篇文章<时钟及温度的显示>中所介绍的作品,是作为一个单片机新手在暑假学了一个月的单片机之后,做的第一个综合性作品,涵盖了二极管.蜂鸣器.数码管.液晶屏.按键.时钟芯片.温度传感器的控制 ...
- 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)
JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...
- Android Studio 2.0 Preview 4 的逆袭以及各种神注释
Android Studio 2.0 Preview 4 的逆袭 一.Android Studio 2.0 Preview 4 AS2.0的改变非常大,今天刚装上,迫不及待的就来分享了,首先我们下载一 ...
- WINCE之“系统事件”——System/Events
1. 简介 Event--事件,相信有线程概念的编程人员都知道,它可以用来同步不同进程.不同线程的通信.在Windows CE 5.0系统中,有一种我称之为"系统事件"的Event ...