Javascript 使用jQuery Ajax添加加载和错误文本

我想知道扩展这段代码有多容易，如果它无法连接，它会显示一个错误，而当它连接时，它会显示一个加载文本或加载图像。在ajax驱动的网站上，这似乎是相当标准的行为，但我在网上没有找到多少关于如何实现这一点的有用信息

$(document).ready(function () {
var loadUrl = 'http://sheldonbrown.com/web_sample1.html';

    $("#close").click(function () {
        $("#country_slide").hide();
    });

    $("#country").click(function () {
        $("#country_slide").show();
        $("#country_slide").html(ajax_load).load(loadUrl);
    });

});

---

根据应用程序的上下文，您可以订阅回调以在某些全局AJAX事件上触发。比如说，每当AJAX调用启动时，或者每当AJAX调用抛出错误时

$(document)
    .ajaxStart(function (e) {
        $('body').showMyAwesomeLoadingGIF();
    })
    .ajaxComplete(function (e) {
        $('body').hideMyAwesomeLoadingGIF();
    });

这将导致这两个回调函数在文档中进行的每个AJAX调用的相应生命周期事件中启动

如果出于某种原因，希望某个AJAX调用而不是触发全局AJAX事件处理程序，则可以指定该特定AJAX调用不是全局的

编辑 如果您想保持更细粒度的控制，可以使用

$.ajaxSetup（）

，但由于jQuery本身不鼓励使用它，我认为您可能需要设计自己的解决方案

就我个人而言，我会使用带有闭包的包装函数来设置自定义选项值，如果它们是您希望重复执行的操作

var ajax = (function () {

    var defaults = { };
    return function (opts) {
        opts = $.extend({}, defaults, opts);

        // place what you want to happen when an AJAX call starts here

        return $.ajax(opts)
            // place corresponding events here
            .done(function (m) {
            })
            .fail(function (x,s,e) {
            })
            .complete(function (m) {
            });
    };

}());

// then use that in your code like how you'd use $.ajax():

ajax({
    url : 'http://my.domain.com/api/users',
    type : 'GET'
}).done(function (m) {
    console.log('Done GET users.');
});

// ... and you can be sure that it has default options and default event handlers,
//     while being able to add on to them if you wish.

---

jQuery中的所有AJAX都使用超级方法

$.AJAX

。在文档中查找它，您会得到成功和错误回调（以及许多其他回调）。像这样吗$（“按钮”）。单击（function（）{$.ajax（{url:“demo_test.txt”，success:function（result）{$（“#div1”）.html（result）；}）；是的，像这样的加上

错误
回调应该可以。这可以和我上面的代码一起使用吗？由于eahc的情况将有所不同，我如何在非全球范围内做到这一点unfortunatly@JamesWillson~您可以在AJAX调用中使用
global:false
，以避免触发全局事件，但是如果您正在寻找针对较小范围的事件，我已经用一个想法编辑了我的答案。
var ajax = (function () {

    var defaults = { };
    return function (opts) {
        opts = $.extend({}, defaults, opts);

        // place what you want to happen when an AJAX call starts here

        return $.ajax(opts)
            // place corresponding events here
            .done(function (m) {
            })
            .fail(function (x,s,e) {
            })
            .complete(function (m) {
            });
    };

}());

// then use that in your code like how you'd use $.ajax():

ajax({
    url : 'http://my.domain.com/api/users',
    type : 'GET'
}).done(function (m) {
    console.log('Done GET users.');
});

// ... and you can be sure that it has default options and default event handlers,
//     while being able to add on to them if you wish.