6.6 序列化元素
1 serialize() 方法
前例在讲解 $.get() 和 $.post() 方法时，表单的HTML如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" id="form1">
<p>评论：</p>
<p>姓名：<input type="text" name="username" id="username"></p>
<p>内容：<textarea name="content" id="content" cols="20" rows="2"></textarea></p>
<p><input type="button" id="send" value="提交"></p>
</form>
<div class="comment">已有评论：</div>
<div id="resText"></div>
</body>
</html>
在进行编译之前。先写好 get.php 文件，并放在根目录
<?php
header("Content-Type:text/html; charset=utf-8");
echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
},function(data, textStatus){
$("#resText").html(data); //将返回的数据添加到页面上
})
})
})
上述方法只适用于少量字段的表单，如果表单复杂的话，使用这种方式在增大工作量的同时也使表格缺乏弹性，jQuery 提供另一个简化方法 ----- serialize() 。能够将 DOM 元素内容序列化为字符串，用于 Ajax请求。（上例可修改为：）
$(function(){
$("#send").click(function(){
$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
♣
{
username : $("#username").val(),
content : $("#content").val()
}
还可以使用字符串方式
“username=”+encodeURIComponent($('#username').val() )
+"&content="+encodeURIComponent($('#content'),val() )
复选框和单选框都可以使用 serialize() 方法将值转化为字符串形式，只会将选中的值序列化。
$(":checkbox,:radio").serialize();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" />足球<br/>
<input type="checkbox" name="check" value="3" />乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
<button id="send">提交</button>
<script>
$(function(){
$("#send").click(function(){
var $data = $(":checkbox, :radio").serialize();
alert($data);
})
})
</script>
</body>
</html>
点击会弹出已选中的项
2 serializeArray() 方法
该方法与 serialize() 类似，该方法不是返回字符串，而是将 DOM 元素序列化后，返回 JSON 格式数据
3 $.param() 方法
它是 serialize() 方法的核心，用来对一个数组或者对象按照 key/value 进行序列化。
下例将一个普通的对象序列化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
$(function(){
var obj = {a:1,b:2};
var k = $.param(obj);
alert(k)
})
</script>
</body>
</html>
6.7 jQuery 中的 Ajax 全局事件
jQuery 简化 Ajax 操作不仅体现在调用 Ajax 方法和处理响应方面，而且还体现在对调用 Ajax 方法的过程中的 HTTP 请求的控制，通过 jQ 提供了一些自定义全局函数，能够为各种与 Ajax 相关的事件注册回调函数。例如当 Ajax 请求开始时，会触发 ajaxStar() 方法的回调函数，当 Ajax 结束时，会触发 ajaxStop() 方法的回调函数，这些方法都是全局方法，因此无论创建它们的代码位于何处，只要有 ajax 请求发生，就会触发它们。
比如某页面图片加载比较慢，如果在加载过程中，不给用户提示一些反馈信息，很容易让客户失去耐心。此时，需要为网页添加一个提示信息，常用的提示信息为：“加载中......”
<div id="loading">加载中...</div>
<!--然后用 CSS 控制元素隐藏，当Ajax请求开始，将元素显示，用来提示用户 Ajax请求正在进行，当请求结束后，将元素隐藏-->
#loading{
width:80px;
height: 20px;
background:#bbb;
color:#000;
display:none;
}
<script>
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
</script>
♠ jQuery 的 Ajax 全局事件中还有几个方法，也可以带来方便
方法名称 | 说明 |
ajaxComplete(callback) | Ajax请求完成时执行的函数 |
ajaxError(callback) | Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递 |
ajaxSend(callback) | Ajax请求发送前执行的函数 |
ajaxSuccess(callback) | Ajax请求成功时执行的函数 |
♥ 如果想使某个 Ajax 请求不受全局方法的影响，那么可以在使用 $.ajax(options)方法时，将参数中的 global 设置为 false 。
$.ajax({
url : "text.html",
global : false //不触发全局 Ajax 事件
})
