1

我有一个包含在函数中的相对简单的 jQuery AJAX 调用，我正在测试我的错误功能。我面临的问题是 AJAX 调用发生得太快了！它导致我的“H6”和“.loading”元素开始重复。我需要的行为是删除元素，然后调用 ajax。

function getAvailability(form) {
    var str = $(form).serialize(),
    warning = $('#content h6');

    if ( warning.length > 0 ) {
        $(warning).remove();
        $('<div class="loading">Loading&hellip;</div>').insertAfter(form);
    }
    else
    {
        $('<div class="loading">Loading&hellip;</div>').insertAfter(form);
    }

    $.ajax({
        type: "POST",
        url: "someFile",
        data: str,

        success: function(calendar) {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $(calendar).insertAfter(form).hide().fadeIn();
            });
        },
        error: function() {
            $('.loading').fadeOut(function() {
                $('<h6>Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form);
            });
        }
    });

    return false;
}

我很想像这样对其进行排序->从页面中删除“警告”，添加.loading。然后触发AJAX。然后淡出.loading，根据成功添加和淡入警告/日历。

我已经修改了我的原始代码，并且我已经得到了按预期运行的功能，主要是因为我在 ajax 过程中禁用了提交按钮。

function getAvailability(form) {
    var str = $(form).serialize(),
    btn = $('#property_availability');

    // Disable submit btn, remove original 'warning', add loading spinner
    btn.attr("disabled", "true");
    $('.warning').remove();
    $('<div class="loading">Loading&hellip;</div>').insertAfter(form);

    $.ajax({
        type: "POST",
        url: "public/ajax/returnAvailability1.php",
        data: str,

        success: function(calendar) {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $(calendar).insertAfter(form).hide().fadeIn();
            });
        },
        error: function() {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $('<h6 class="warning">Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form);
                btn.removeAttr("disabled");
            });
        }
    });

    return false;
}

我相信由于 fadeOut() 函数产生的时间延迟，原始序列没有按预期工作。

4

2 回答 2

2

warning为什么不使用 ajaxStart 和 ajaxStop 来显示/隐藏，而不是添加和删除？

warning.ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).fadeOut();
});
于 2013-04-05T15:21:30.750 回答
0

如果您需要对事件进行排序，那么您应该尝试使用作为 jQuery.ajax API 一部分的 deferred 和 promise 方法。这篇文章很好地介绍了它们： http: //www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html

于 2013-04-05T15:16:50.340 回答