jQuery工具方法serialize()和serializeArray()

最新推荐文章于 2024-05-23 11:01:45 发布

iteye_21104

最新推荐文章于 2024-05-23 11:01:45 发布

阅读量79

点赞数

分类专栏： jquery 文章标签： javascript xhtml json ViewUI

本文链接：https://blog.csdn.net/iteye_21104/article/details/82343202

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[img]http://dl.iteye.com/upload/picture/pic/114448/eb52d40c-556f-3d7c-8e02-bde01582d195.png[/img]
[img]http://dl.iteye.com/upload/picture/pic/114446/6dc2d194-3bb8-3540-8627-c827db148bd7.png[/img]

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
	<script type="text/javascript">
		//为id为button1的按钮绑定事件处理函数
		$("#button1").click(function() {
			//将id为infoForm的表单转换为查询字符串
			$("#show").html($("#infoForm").serialize());
		});
		//为id为bn2的按钮绑定事件处理函数
		$("#button2")
				.click(
						function() {
							//将所有输入元素转换为数组
							var arr = $(":input").serializeArray();
							$("#show").empty();
							//遍历arr数组
							for ( var index in arr) {
								$("#show").append(
										"第" + index + "表单控件名为："
												+ arr[index].name + ",值为："
												+ arr[index].value + "<br />");
							}
						});
	</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
</head>

<body>
	<form id="infoForm">
		<p>
			用户名 <label for="textfield"></label> <input type="text"
				name="username" id="username" />
		</p>
		<p>
			<label for="textarea">简介</label>
			<textarea name="intro" id="intro" cols="45" rows="5"></textarea>
		</p>
		<p>
			<label for="select">来自</label> <select name="country" id="country">
				<option value="1">中国</option>
				<option value="2">日本</option>
				<option value="3">韩国</option>
			</select>
		</p>
	</form>
	<p>
		<input type="button" name="button1" id="button1" value="查询字符串" /> 
		<input type="button" name="button2" id="button2" value="查询JSON对象" />
	</p>
	<span id="show"></span>
	<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
	<script type="text/javascript">
		//为id为button1的按钮绑定事件处理函数
		$("#button1").click(function() {
			//将id为infoForm的表单转换为查询字符串
			$("#show").html($("#infoForm").serialize());
		});
		//为id为bn2的按钮绑定事件处理函数
		$("#button2")
				.click(
						function() {
							//将所有输入元素转换为数组
							var arr = $(":input").serializeArray();
							$("#show").empty();
							//遍历arr数组
							for ( var index in arr) {
								$("#show").append(
										"第" + index + "表单控件名为："
												+ arr[index].name + ",值为："
												+ arr[index].value + "<br />");
							}
						});
	</script>
</body>
</html>

iteye_21104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery工具方法serialize()和serializeArray()

[img]http://dl.iteye.com/upload/picture/pic/114448/eb52d40c-556f-3d7c-8e02-bde01582d195.png[/img][img]http://dl.iteye.com/upload/picture/pic/114446/6dc2d194-3bb8-3540-8627-c827db148bd7.png[/img][c...
复制链接

扫一扫