jquery ajax全局方法的使用

来源：互联网发布：黑白格子裙图片淘宝编辑：程序博客网时间：2024/05/21 13:14

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，实在太爽了。

效果如下：

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

0 0