`

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

 
阅读更多 


<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>
分享到：
| C语言中的sizeof
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    前端项目-jquery-serialize-object.zip

    jQuery的`serialize()`方法用于将表单中的所有可选元素（如文本输入、复选框、单选按钮等）转换为URL查询字符串，即键值对的形式，便于通过Ajax发送到服务器。例如，一个包含name属性的表单元素`...

    jQuery中serializeArray()与serialize()的区别实例分析

    主要介绍了jQuery中serializeArray()与serialize()的区别,结合实例形式分析了jQuery中serializeArray()与serialize()的具体功能、使用技巧与用法区别,需要的朋友可以参考下

    JQuery中serialize()、serializeArray()和param()方法示例介绍

    **serialize()** 方法是JQuery中用于处理表单数据的一个工具方法，它可以将表单中的元素序列化为URL编码的字符串，这样就可以将表单数据以查询字符串的形式进行传输，常用于AJAX请求中。序列化表单的目的是将form...

    serializeJSON:jQuery插件包装jQuery的serializeArray（）输出，并将键值映射为单个对象，包括使用单个键将同名的多个字段转换为值列表。 非常适合“ POST”数据

    serializeJSON 0.0.2 麻省理工学院执照jQuery插件包装jQuery的serializeArray（）输出，并将键值映射为单个对象，包括使用单个键将同名的多个字段转换为值列表。 插件不进行类型检查/转换。 它只是将数据收集到一个...

    JQuery中serialize() 序列化

    本文将深入探讨jQuery中`serialize()`方法的定义、用法、实例及其内部机制。 一、`serialize()`方法的定义和用法 `serialize()`方法是针对jQuery对象中代表表单元素集合设计的。它能够将这些元素的值转化为URL编码...

    jquery.serialize() 函数语法及简单实例

    `serialize()`方法可以与其他jQuery方法结合使用，比如`serializeArray()`，它会返回一个数组，而不是URL编码的字符串，每个元素都是一个包含`name`和`value`的对象。 ```javascript var formDataArray = $("form")...

    jQuery ajax serialize()方法的使用以及常见问题解决

    在处理表单数据时，`serialize()` 方法是一个非常实用的工具，它能够将表单中的输入元素（如`&lt;input&gt;`, `&lt;textarea&gt;`, `&lt;select&gt;`等）的值转换成URL编码的字符串，方便在Ajax请求中作为数据发送。 **jQuery `...

    jQuery实现用户添加

    jQuery提供`.serialize()`或`.serializeArray()`方法，可以将表单数据转换为字符串或数组，便于后续处理。 4. **Ajax交互**：为了实现无刷新的用户体验，我们通常会使用Ajax技术向服务器发送数据。jQuery的`.ajax()...

    ajax jquery的使用

    Ajax 和 jQuery 是 web 开发中的两个重要工具，它们在创建动态、交互性强的网页时起着关键作用。Ajax（Asynchronous JavaScript and XML）是一种技术，它允许网页在不刷新整个页面的情况下与服务器交换数据并更新...

    15天学会jQuery.rar

    - 探讨serialize()和serializeArray()方法用于表单数据序列化 第九天：插件开发与使用 - 理解jQuery插件开发的基本原理和结构 - 学习如何创建自定义插件 - 探索和使用常见的jQuery插件，如jQuery UI和Bootstrap 第...

    使用JQuery实现从JSON对象转换为form提交数据

    在处理表单数据时，jQuery的`serialize()`和`serializeArray()`方法尤为有用。 1. **JSON对象到表单数据的转换** 要将JSON对象转换为适合表单提交的数据格式，我们需要遍历JSON对象的键值对，构建一个字符串形式的...

    JQuery中serialize()用法实例分析

    6. serialize()方法实际上是对serializeArray()方法的一个简单包装，它通过$.param()方法对数组或对象进行序列化。$.param()方法会按照key/value对数组或对象进行序列化，并且创建成一个字符串。 举个例子，如果...

    jquery写的增删改

    jQuery 提供了 `serialize()` 和 `serializeArray()` 方法来序列化表单数据，方便发送到服务器。 6. **回调函数**：在执行增删改操作时，我们可能会用到回调函数来处理成功或失败的情况。例如，`$.ajax()` 接受 `...

    jquery教程 15天学会jquery(完整版)

    4. **表单操作与序列化**：处理表单元素，如`.serialize()`, `.serializeArray()`，以及表单验证。 **第11天至第15天：实战应用** 1. **响应式设计**：结合jQuery实现响应式网页，响应不同设备和屏幕尺寸。 2. **...

    jquery form

    jQuery Form插件还提供了`serialize`和`serializeArray`方法，用于将表单数据转换为URL编码的字符串或JSON格式数组，便于发送到服务器。 **6. 异步上传文件** 对于包含文件输入的表单，jQuery Form插件支持File ...

    与jquery serializeArray()一起使用的函数，主要来方便提交表单

    .serializeArray() 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。 有以下一个表单窗口，代码： 代码如下: &lt;form action=”” method=”post” id=”tf”&gt; ”100%...

    jquery中文API离线1.6

    `.getJSON()`用于获取JSON格式的数据，`.serialize()`和`.serializeArray()`用于序列化表单数据。 ### 6. 版本差异 在jQuery 1.6中，主要改进了属性处理，引入了`.data()`和`.prop()`的区分。`.data()`用于存储用户...

Magicbox
Global site tag (gtag.js) - Google Analytics