jQuery函数之serialize()

最新推荐文章于 2023-10-25 17:57:43 发布

Geek_ymv

最新推荐文章于 2023-10-25 17:57:43 发布

阅读量720

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Geek_ymv/article/details/40556547

版权

JavaScript 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

jQuery中文文档：http://jquery.bootcss.com/

serialize()将用作提交的表单元素的值编译成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有name 属性。此外，复选框（checkbox）和单选按钮（radio）(input 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。

示例代码：把一个表单序列化成一个查询字符串，使之能够在一个Ajax请求中发送。

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<style>
			body, select {
				font-size: 12px;
			}
			form {
				margin: 5px;
			}
			p {
				color: red;
				margin: 5px;
				font-size: 14px;
			}
			b {
				color: blue;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			
			$(function(){

				$(":checkbox, :radio").click(showValues);
				$("select").change(showValues);
				
				showValues();
			});
			
			function showValues() {
				var str = $("form").serialize();
				$("#results").text(str);
			}
	
			
		</script>
	</head>
	<body>
		<form>
			<select name="single">
				<option>Single</option>
				<option>Single2</option>
			</select>
			<br />

			<select name="multiple" multiple="multiple">
				<option selected="selected">Multiple</option>
				<option>Multiple2</option>
				<option selected="selected">Multiple3</option>
			</select>
			<br/>

			<input type="checkbox" name="check" value="check1" id="ch1"/>
			<label for="ch1">check1</label>
			<input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
			<label for="ch2">check2</label>
			<br />

			<input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
			<label for="r1">radio1</label>
			<input type="radio" name="radio" value="radio2" id="r2"/>
			<label for="r2">radio2</label>
		</form>
		<p>
			<tt id="results"></tt>
		</p>
		
	</body>
</html>