jQuery序列化表单为JSON对象

<form id="myform">
	<table>
		<tr>
			<td>姓名:</td>
			<td> <input type="text" name="name" /> </td>
		</tr>
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="sex" value="1"> 男
				<input type="radio" name="sex" value="0"> 女
			</td>
		</tr>
		<tr>
			<td>年龄:</td>
			<td>
				<select name="age">
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" value="basketball" name="hobby">篮球
				<input type="checkbox" value="volleyball" name="hobby">排球
				<input type="checkbox" value="football" name="hobby">足球
				<input type="checkbox" value="earth" name="hobby">地球
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" id="ajaxBtn" value="提交" />
			</td>
		</tr>
	</table>
</form>
<script type="text/javascript">

	$(function() {
		$("#ajaxBtn").click(function() {
			    var params = $("#myform").serializeObject(); //将表单序列化为JSON对象
				console.info(params);
			})
	})

	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || ‘‘);
			} else {
				o[this.name] = this.value || ‘‘;
			}
		});
		return o;
	}
</script>

上述serializeObject方法是将form序列化为JSON对象

时间: 2024-07-31 04:51:29

jQuery序列化表单为JSON对象的相关文章

序列化表单为json对象,datagrid带额外参提交一次查询 后台用Spring data JPA 实现带条件的分页查询

查询窗口中可以设置很多查询条件 表单中输入的内容转为datagrid的load方法所需的查询条件向原请求地址再次提出新的查询,将结果显示在datagrid中 转换方法看代码注释 <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"&g

jQuery 序列化表单数据

[转自]jQuery 序列化表单数据 serialize() serializeArray() 1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为 $("form").serialize() 即可. 2.serializeArray()方法 格式:var jsonData = $("

jquery序列化表单以及回调函数的使用

在开发项目中,将前台的值传给后台,有时的JSP表单中的值有一两个,也有全部的值,如果这时一个个传,必定不是很好的办法,所以使用jQuery提供的表单序列化方法,可以很好的解决这个问题,同时可以封装成通用的函数,执行成功可以调用各自的回调函数,实现各自的功能. 代码如下: function queryUserInfo(actionUrl,formId,fun){ var params=new Object(); //声明数组 $.each($("#"+formId).serializeA

form表单转化json对象

利用 $.fn 可以让每一个jquery 对象都能直接使用这个方法. //form表单转化json对象$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].pus

jQuery序列化表单时将制定元素排除在外

jQuery序列化表单时将制定元素排除在外:大家知道使用serialize()函数可以序列化一个表单,但是可能在实际应用中,需要将制定的表单元素排除在外,下面就通过实例代码演示一下如何实现此效果,代码实例如下: $("form[name='theform']").not($("input[type='hidden']")).not($("input[class='txt']")).serialize(); 上面代码只是一个演示,实际应用中要根据自

jQuery序列化表单 serialize() serializeArray()

1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var data = $("form").serialize(); 2.serializeArray()方法 描述:序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据. 注意,此方法返回的是JSON对象而非JSON字符串.需要使用插件或者<a>第三方库</a>进行字符串化操作. 格式:var jsonData = $("form"

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

1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为 $("form").serialize() 即可. 2.serializeArray()方法 格式:var jsonData = $("form").serializeArray(); 功能:将页面表单序列化成一个JSON

jQuery 序列化表单

<div class="letter" id="letter-f"> <h3>F</h3> <form action="f.php"> <input type="text" name="term" value="" id="term"> <button type="submit"&g

jQuery 序列化表单数据 serialize() serializeArray()

1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为 $("form").serialize() 即可. 2.serializeArray()方法 格式:var jsonData = $("form").serializeArray(); 功能:将页面表单序列化成一个JSON