时间:2021-07-01 10:21:17 帮助过:3人阅读
ajaxStart:ajax请求开始前
ajaxSend:ajax请求时
ajaxSuccess:ajax获取数据后
ajaxComplete:ajax请求完成时
ajaxError:ajax请求发生错误后
ajaxStop:ajax请求停止后
当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件,只是通常不绑定全局事件,但实际上这些全局事件非常有用处。
ajax全局事件,有个典型的应用场合:你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据“;ajax请求成功时提示框显示“数据获取成功”;ajax请求结束后隐藏提示框。不使用全局事件的做法是:给$.ajax()加上beforeSend、success、complete回调函数,在回调函数中加上处理提示框。使用全局事件的做法是:
$(document).ajaxStart(onStart) .ajaxComplete(onComplete) .ajaxSuccess(onSuccess); function onStart(event) { //..... } function onComplete(event, xhr, settings) { //..... } function onSuccess(event, xhr, settings) { //..... }
1.ajaxStart(全局事件)
2.beforeSend(局部事件)
3.ajaxSend(全局事件)
4.success(局部事件)
5.ajaxSuccess(全局事件)
6.error(局部事件)
7.ajaxError (全局事件)
8.complete(局部事件)
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <input type="button" value="点击触发ajax请求" id="ajaxReuqestID" /> <p id="ajaxStateID"></p> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(function() { //点击按钮,并执行ajax请求 $(document).ajaxStart(function() { $("#ajaxStateID").append("ajaxStart" + "<br/>"); alert("ajaxStart"); }).ajaxSend(function() { $("#ajaxStateID").append("ajaxSend" + "<br/>"); alert("ajaxSend"); }).ajaxSuccess(function() { $("#ajaxStateID").append("ajaxSuccess" + "<br/>"); alert("ajaxSuccess"); }).ajaxError(function() { $("#ajaxStateID").append("ajaxError" + "<br/>"); alert("ajaxError"); }).ajaxComplete(function() { $("#ajaxStateID").append("ajaxComplete" + "<br/>"); alert("ajaxComplete"); }).ajaxStop(function() { $("#ajaxStateID").append("ajaxStop" + "<br/>"); alert("ajaxStop"); }); $("#ajaxReuqestID").click(function() { $.ajax({ url: "server/ajaxtxt.txt", global: true, beforeSend: function() { $("#ajaxStateID").append("berforeSend" + "<br/>"); alert("berforeSend"); }, success: function() { $("#ajaxStateID").append("success" + "<br/>"); alert("success"); }, error: function() { $("#ajaxStateID").append("error" + "<br/>"); alert("error"); }, complete: function() { $("#ajaxStateID").append("complete" + "<br/>"); alert("complete"); } }); }); }); </script> </body> </html>
以上就是ajax全局事件引用方式以及各个事件(全局/局部)执行顺序的详细内容,更多请关注Gxl网其它相关文章!