Ajax :六个全局事件

加载请求: .ajaxStart() 和 .ajaxstop()

    $(document).ajaxStart(function(){
        $(‘.loading‘).show();
    }).ajaxStop(function(){
        $(‘.loading‘).hide();
    });

错误处理: .ajaxError()

    //1 $.ajax()使用属性提示错误
    $(‘form input[type=button]‘).click(function(){
        $.ajax({
            type:"post",
            url:"test1.php",
            async:true,
            data:$(‘form‘).serialize(),
            success:function(response,status,xhr){
                $(‘#box‘).html(response);
            },
//            timeout:3000
//            global:false
            error:function(xhr,errorText,errorType){
//                alert(errorText + ‘:‘ +errorType);
                alert(xhr.status + ‘:‘ +xhr.statusText);
            }

        });
    });

    //2 $.post()使用连缀.error()方法提示错误,将被.fail()取代
    $(‘form input[type=button]‘).click(function(){
        $.post(‘test1.php‘).error(function(xhr,errorText,errorType){
            alert(errorText + ‘:‘ +errorType);
            alert(xhr.status + ‘:‘ +xhr.statusText);
        });
    });

    //3 使用全局.ajaxError()方法
    $(document).ajaxError(function(event,xhr,settings,info){
        alert(event.type);
        alert(event.target);
        for(var i in event){ //打印出event的所有属性
            document.write(i + ‘<br />‘);
        }
    });

.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。

.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。

.ajaxSend(),没有对应的局部方法,只有属性 beforeSend,请求发送之前要绑定的函数。

    //$.post()使用全局
    $(‘form input[type=button]‘).click(function(){
        $.post(‘test.php‘,$(‘form‘).serialize());
    });

    $(‘document‘).ajaxSend(function(){
        alert(发送请求之前执行);
    }).ajaxComplete(function(response,status,xhr){
        alert(‘请求完成后,不管是否失败成功‘);
    }).ajaxSuccess(function(event,xhr,settrings){
        alert(‘请求成功后,不管是否成功‘);
    }).ajaxError(function(event,xhr,settrings){
        alert(‘请求失败后‘);
    });

    //$.post()使用局部
    $(‘form input[type=button]‘).click(function(){
        $.post(‘test.php‘,$(‘form‘).serialize()).success(function(){
            alert(‘请求成功后‘);
        }).complete(function(){
            alert(‘请求完成后‘);
        }).error(function(){
            alert(‘请求失败后‘);
        });
    });

    //$.ajax()使用属性
    $(‘form input[type=button]‘).click(function(){
        $.ajax({
            type:"post",
            url:"test1.php",
            async:true,
            data:$(‘form‘).serialize(),
            success:function(response,status,xhr){
                alert(‘请求成功后‘);
            },
            complete:function(){
                alert(‘请求完成后,不管失败成功‘);
            },
            beforeSend:function(){
                alert(‘发送请求之前‘);
            },
            error:function(xhr,errorText,errorType){
                alert(‘请求失败后‘);
            }
        });
    });    

注:

jQuery1.5 版本以后,使用.success().error().complete()连缀的方法,可以用.done().fail().always()取代。

时间: 2024-08-03 23:30:50

Ajax :六个全局事件的相关文章

jquery的ajax全局事件详解

    jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板: $.ajax({ type: "get", url: "", data : {}, beforeSend : function(){ }, success : function(data){ }, complete : function(){ } }); 关于$.ajax()方法的使用,不是明河写这篇文章的目的,今天明河主要讲解当进行ajax请求时整个完整的事件流程

锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例敲结果并不会执行. 在查阅资料后,发现原来在jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发. 下面是各版本不同写法: <html> <head> <meta charset="utf-8"> <style>

jquery——全局事件

query中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSuccess(全局事件) 6.error(局部事件) 7.ajaxError (全局事件) 8.complete(局部事件) 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件) 其中,全局事件可以在ajax相关方法外引用(比如,通过该方式将ajax执行各个阶段的信息显示在页面某个地方

Javascript 事件对象(六)键盘事件

keyCode获取用户按下键盘的哪个按键 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 onkeydown : 当键盘按键按下的时候触发

asp.net架构基础知识--页面以及全局事件

1.asp.net的请求过程,以及对应的处理请求的dll客户的请求页面由aspnet_isapi.dll这个动态连接库来处理,把请求的aspx文件发送给CLR进行编译执行,然后把Html流返回给浏览器 2.页面事件(按照事件的执行顺序排列) Page_Init:初始化值或连接 Page_Load:主要使用IsPostBack,该事件主要执行一系列得操作来首次创建asp.net页面或响应 由投递引起得客户端事件.在此事件之前,已还原页面和控件视图状态. Page_DataBind:在页面级别上调用

框架基础:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布

距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的原因,导致没有太多时间去搞东西.感觉亏欠了好多,所以这次一次性补上.废话不多说了,我们直接进入主题. 介绍这次讲解的库的更新: ajax全局配置 请求参数的拓展(增加json)和重构优化 初始化参数类型检查 浏览器错误回收机制 增加ajax请求blob(二进制)类型 跨域问题的总结和支持 npm打包

Ajax动态刷新元素js事件失效

工作中遇到一个情况,通过Ajax动态刷新某一区域后,原来绑定在这些dom元素上的js事件就失效了,定位了半天也不知道原因在那,后来查了资料发现动态刷新后的区域Dom元素是重新生成,所以页面之前的js不会动态绑定到新生成的元素上,这怎么解决呢,这里就用到了jQuery的事件委托机制来实现,示例代码如下: jQuery1.7版本以前可以通过live事件委托方式: $(selector).live("click", function(){ // 事件逻辑 }); 1.7版本后jQuery废除