jquery ajax全局方法的使用_jq 全局ajax-优快云博客

本文介绍了JQuery中AJAX的六个全局方法：ajaxStart、ajaxSend、ajaxSuccess、ajaxComplete、ajaxError和ajaxStop，并通过示例展示了如何在AJAX请求开始和结束时显示和隐藏加载提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery 的AJAX方法使用非常的便利，并且提供了一些AJAX的全局方法供调用，合理使用这些方法将会产生非常大的帮助。

所谓全局方法，是指每当调用JQuery的AJAX方法，都会自动调用这些全局方法，以下是JQuery的所有全局方法：

ajaxStart：ajax请求开始前
ajaxSend：ajax请求时
ajaxSuccess：ajax获取数据后
ajaxComplete：ajax请求完成时
ajaxError：ajax请求发生错误后
ajaxStop：ajax请求停止后

通常我们在发起AJAX请求时都会加一个正在请求中的提示或是图片，这时我们就可以借助AJAX的全局方法，而不必为每个请求都加一次提示，这将是非常大的便利。

以下是示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>ajax全局方法介绍</title>
</head>
<body>

<button id="btn1">ajax请求1</button>
<br>
<button id="btn2">ajax请求2</button>

<script>

    $(function () {
        $('#btn1').click(function(){
            $.ajax({
                url : 'test.php',
                type : 'POST',
                timeout : 2000,
                success : function(rt){
                    alert(rt);
                    return;
                },
                complete : function (xhr, status) {
                    if(status == 'timeout'){
                        alert('请求超时,请检查网络');
                        return ;
                    }
                }
            })
        });

        $('#btn2').click(function () {
            $.get('test.php', {}, function(data, status){
                alert('data:' + data + "\n" + 'status : ' + status);
            })
        })
    });


    //发起ajax请求时加loading
    $(document).ajaxStart(function(){
        loading();
    });

    //ajax请求结束时移除loading
    $(document).ajaxComplete(function(){
        removeLoading();
    });

    function loading(){
        $('#loading').show();
    }

    function removeLoading(){
        $('#loading').hide();
    }
</script>

<div id="loading" style="display: none">
    <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;background: rgba(150,150,150,.6);z-index: 9999;overflow: hidden">
        <img src="http://www.w3school.com.cn/i/demo_wait.gif" style="position: relative;left : 50%; top : 50%; transform: translate(-50%,-50%);">
    </div>
</div>

</body>
</html>

test.php :

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2016/4/04
 * Time: 0:11
 */

sleep(3);
echo '当前时间为：' . date('Y-m-d H:i:s');

这样每个AJAX请求开始都会自动加上loading，结束时自动去掉loading，如果把这段代码放到公共的文件里，则可以实现整站自动加loading，实在太爽了。

效果如下：

更多便利的使用方法大家可以自己去思考。