第六章（jQuery 与 Ajax 的应用）（6.6 序列化元素 6.7 jQuery 中的 Ajax 事件）
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); // 把返回的数据添加到页面上 } ); }) })
♣ $.get() 方法中 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 事件 })
