JQuery中的param()、 serialize() 和serializeArray()方法

最新推荐文章于 2023-07-28 09:02:10 发布

A_山水子农

最新推荐文章于 2023-07-28 09:02:10 发布

阅读量4.3k

点赞数 1

分类专栏： jQuery 文章标签： param serialize serializeArray 对象序列化表单序列化

本文链接：https://blog.csdn.net/qq_27626333/article/details/52203815

版权

jQuery 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

1、param方法

param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法：$.param(object,trad)
object：必需。规定要序列化的数组或对象。
trad：可选。布尔值，指定是否使用参数序列化的传统样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="js/jquery-3.1.0.js">
</script>
<script>
$(document).ready(function(){  
  personObj=new Object();  
  personObj.firstname="John";  
  personObj.lastname="Doe";  
  personObj.age=50;  
  personObj.eyecolor="blue";   
  $("button").click(function(){  
    $("div").text($.param(personObj));  
  });  
});  
</script>
<style>
div{
width:450px;
margin-top: 20px;
border: solid grey 2px;
padding: 5px;
border-radius: 10px;
text-align: center;
background-color:yellowgreen;
color: white;
}
</style>
</head>
<body>
<button>序列化对象</button>  
<div></div> 
</body>
</html>

2、serialize方法

serialize() 方法通过序列化表单值创建 URL 编码文本字符串。可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法：$(selector).serialize()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="js/jquery-3.1.0.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
});
</script>
<style>
<pre code_snippet_id="1828985" snippet_file_name="blog_20160814_1_9126200" name="code" class="html">div{
width:450px;
margin-top: 20px;
border: solid grey 2px;
padding: 5px;
border-radius: 10px;
text-align: center;
background-color:yellowgreen;
color: white;
}

</style></head><body><form action="">姓名: <input type="text" name="Name" value="Zou Miao" /><br><br>学校: <input type="text" name="School" value="KunGong" /><br><br>时间: <input type="date" name="Time"/><br><br>邮箱: <input type="email" name="Email"/><br><br></form><br><button>序列化表单值</button><div></div></body></html>

3、serializeArray方法

serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
语法：$(selector).serializeArray()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="js/jquery-3.1.0.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    x=$("form").serializeArray();
    $.each(x, function(i, field){
      $("#results").append(field.name + ":" + field.value + " ");
    });
  });
});
</script>
<style>
	div{
		width:450px;
		margin-top: 20px;
		border: solid grey 2px;
		padding: 5px;
		border-radius: 10px;
		text-align: center;
		background-color:yellowgreen;
		color: white;
	}
</style>
</head>
<body>
<form action="">
姓名: <input type="text" name="Name" value="Zou Miao" /><br><br>
学校: <input type="text" name="School" value="KunGong" /><br><br>
时间: <input type="date" name="Time"/><br><br>
邮箱: <input type="email" name="Email"/><br><br>
</form><br>
<button>序列化表单值</button>
<div id="results"></div>
</body>
</html>

A_山水子农

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的param()、 serialize() 和serializeArray()方法

1、param方法param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。语法：$.param(object,trad)object：必需。规定要序列化的数组或对象。trad：可选。布尔值，指定是否使用参数序列化的传统样式。$(document).ready(function(){
复制链接

扫一扫