Question

我试图在项目中所有ajaxForms上使用beforeSend和complete函数。我想在整个项目中不添加确切代码的情况下执行此操作。

我已经能够使用以下代码按表单完成此操作。

           beforeSend: function() {
                $('.lightbox').append('<div id="page-loader" style="display:block"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
            },
            complete: function(xhr) {
                $('.lightbox#page-loader').remove()
            },

我希望能够将该代码放在每次提交ajaxForm时执行的地方。这可能吗？

Answer 1

如果有人遇到类似的难题，这就是我想出的，而且似乎可以解决问题。到目前为止，我还没有发现任何问题。

// add loading masks on form submits
$( document ).ajaxSend(function() {
    $('.lightbox').append('<div id="page-loader" style="display:block; z-index: 999"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
});

$(document).ajaxSuccess(function() {
    $('#page-loader').remove()
});

Answer 2

$(function(){
    $.ajaxSetup({
        beforeSend: function() {
            $('.lightbox').append('<div id="page-loader" style="display:block"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
        },
        complete: function(xhr) {
            $('.lightbox#page-loader').remove()
        },  
    });
});

请使用ajaxsetup函数。当您这样做时，它将在所有ajax函数中有效。

推荐人： https://api.jquery.com/jQuery.ajaxSetup/

在全局每个ajaxForm实例中使用beforeSend和complete

2 个答案: