全局为每一个ajax请求都附带一个loading效果 .ajaxSend

描述: 在Ajax请求发送之前绑定一个要执行的函数,这是一个 Ajax Event.

  • 添加的版本: 1.0.ajaxSend( handler(event, jqXHR, ajaxOptions) )

    • handler(event, jqXHR, ajaxOptions)

      类型: Function()

      被调用的函数。

每当一个Ajax请求即将发送,jQuery就会触发ajaxSend事件,在这个时间点所有处理函数都会使用.ajaxSend()方法注册并执行。

观察这种方法,建立一个基本的Ajax加载请求:


1

2

3

<div class="trigger">Trigger</div>

<div class="result"></div>

<div class="log"></div>

在document上绑定事件处理器:


1

2

3

$(document).ajaxSend(function() {

$( ".log" ).text( "Triggered ajaxSend handler." );

});

现在,我们可以使用任何的jQuery方法构建一个Ajax请求:


1

2

3

$( ".trigger" ).click(function() {

$( ".result" ).load( "ajax/test.html" );

});

当我们点击class为 trigger 的元素并且Ajax请求即将开始,这个信息就会显示。

注,这段在官网的原文中已经被删除: 因为.ajaxComplete() 是作为一个jQuery对象实例方法去执行的,回调函数中,我们可以用this关键字作为指定的元素。

无论哪一个Ajax请求被发送,所有ajaxSend处理器都将被执行。如果我们必须区分不同的请求,我们可以使参数传递给这个处理器。 每次ajaxSend 处理器执行,它传递事件对象,jqXHR对象(在 jQuery 1.4中是XMLHttpRequest对象),和用来创建请求的设置(settings object)对象。如果请求失败,因为JavaScript抛出一个异常,并且作为第四个参数的异常对象被传递给处理程序。举个例子,我们能限制我们的回调到只处理事件处理某一特定的URL:


1

2

3

4

5

$(document).ajaxSend(function(event, jqxhr, settings) {

if ( settings.url == "ajax/test.html" ) {

$( ".log" ).text( "Triggered ajaxSend handler." );

}

});

其他注意事项:

  • 在jQuery1.9中,jQuery全局AJAX事件的所有处理程序, 包括哪些.ajaxSend()添加的方法,必须 附加到 document上。
  • 如果 $.ajax()$.ajaxSetup()调用时, global 选项设置为 false.ajaxSend()将不会触发。

例子:

当Ajax请求即将发送前显示一个信息。


1

2

3

$(document).ajaxSend(function(event, request, settings) {

$( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );

});

当前结束的时候别忘了关闭loading。

同时也有下面这些方法,参与都与ajaxSend一致。
$(document).ajaxSend(onAjaxSend)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess)
.ajaxError(onError);

时间: 2024-10-12 09:05:04

全局为每一个ajax请求都附带一个loading效果 .ajaxSend的相关文章

写一个ajax请求出现的问题

今天在写一个ajax请求的时候出现ajax请求成功后,页面居然会出现刷新,url有跳转,找了半天,终于发现了问题所在,原来我在表单里面有一个 <input type="button" onclick="submit()"/>元素,之前用的是表单提交的方式发送的请求,改成ajax请求后忘记删除,但是我好奇的是我在js里面写的submit()方法已经被删除了,怎么还会提交表单呢?我仔细一看,原来button的onclick事件触发的submit()方法还是会

thinkphp 使每一个模板页都包括一个header文件和一个footer文件

在开发的过程中,常常遇到要使每一个模板页都包括一个header文件和一个footer文件.thinkPHP的模板布局为我们提供了一个叫全局配置方式可以解决问题. 1. 在配置文件里开启LAYOUT_ON 參数(默认不开启),而且设置布局入口文件名称LAYOUT_NAME(默觉得layout) 'LAYOUT_ON'=>true, 'LAYOUT_NAME'=>'layout', 2. 在模板文件夹下建立一个layout.html文件,文件内代码例如以下: <include file=&q

两个ajax请求都成功之后打印一个字符串的(要求请求均为异步)

方法一: $.when($.ajax({url: 'url_1',data: data, success: function() { console.log('aaaa'); }}),$.ajax({url: 'url_2', data: data, success: function(){ console.log('bbb') }})).done(function(){ console.log('ccccc'); }).fail(function(){ console.log('fialed'

Ext 的Ajax 请求,添加mask 等待效果

{ text: "删除", iconCls: "btn-del", scope: this, handler: function() { var f = this.centerPanel; var d = f.getSelectionModel().getSelections(); if (d.length == 0) { Ext.ux.Toast.msg("信息", "请选择要删除的记录!"); return; } var

集合练习 练习:每一个学生Student都有一个对应的归属地定义为String类型。学生属性:姓名,年龄 注意:姓名和年龄相同的视为同一个学生。保证学生的唯一性。 1、描述学生。 2、定义Map容器,将学生作为键,地址作为值存入集合中。 3、获取Map中的元素并进行排序。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Monaco } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Monaco; min-height: 30.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Monaco; color: #931a68 } p.p4 { margin: 0.0px 0.0px 0

ajax请求完成之前的loading加载效果

/*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);&q

ajax请求的异步嵌套问题分析

(本文章以as3代码为例) 问题的产生 在前端开发时,经常会使用到Ajax(Asynchronous Javascript And XML)请求向服务器查询信息(get)或交换数据(post),ajax请求都是异步响应的,每次请求都不能同步返回结果,而且多次请求嵌套在一起时,逻辑很难处理,怎么办呢? 在as3中,get请求的写法通常如下 public static function httpGet(url:String):void { var httpService:HTTPService =n

Vue处理ajax请求

Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path"); const resolve = dir => path.join(__dirname, dir); const BASE_URL = process.env.NODE_ENV === 'procution' ? '/iview-admin/' : '/' module.exports = { l

监控页面所有 ajax请求

监控所有ajax请求: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en"> <head> <meta charset