ajax全局事件引用方式以及各个事件(全局/局部)执行顺序
来源:互联网 发布:炫舞卡坐骑软件 编辑:程序博客网 时间:2024/05/17 08:37
jquery的ajax方法的全部全局事件:
ajaxStart:ajax请求开始前
ajaxSend:ajax请求时
ajaxSuccess:ajax获取数据后
ajaxComplete:ajax请求完成时
ajaxError:ajax请求发生错误后
ajaxStop:ajax请求停止后
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) {//.....}
jquery中各个事件执行顺序如下
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" /><div id="ajaxStateID"></div><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>
阅读全文
0 0
- jquery $.ajax 全局事件引用方式以及各个事件(全局/局部)执行顺序
- jquery之ajax——全局事件引用方式以及各个事件(全局/局部)执行顺序
- ajax全局事件引用方式以及各个事件(全局/局部)执行顺序
- ajax 全局事件 和 各个参数用法
- ajax各个事件执行顺序
- ajax全局事件
- jquery ajax全局事件
- jquery ajax全局事件
- ajax的全局事件
- jquery $.ajax各个事件执行顺序
- jQuery ajax 全局事件设置
- jQuery 中的 Ajax 全局事件
- jquery中各个ajax事件执行顺序如下:
- ajax---jquery中各个事件的执行顺序
- 全局事件ajaxStart、ajaxStop不执行
- jquery的ajax全局事件详解
- jquery的ajax全局事件详解
- 6.7: jQuery中的Ajax全局事件
- 安装本地存在的包到maven中
- github提交代码无法改变远程仓库路径
- 系统调用实现Linux命令 ls -al
- MLP(多层感知器)神经网络
- Python语法第2讲:条件分支与循环控制
- ajax全局事件引用方式以及各个事件(全局/局部)执行顺序
- Ubuntu 安装及卸载GIMP步骤
- 【BZOJ】1787 [Ahoi2008]Meet 紧急集合 LCA
- Java应用中使用ShutdownHook友好地清理现场
- jvm工具
- 内部排序—快速排序
- vue +bootstrap 写的小例子
- caffe Resnet-50 finetune 所有代码+需要注意的地方
- 好用的工具