Question

我有这个ajax功能：

function callpage() {
    $('#formcontent').empty().html('<p class="vent">Pleace wait</p>');
    var form = $('form#sog');
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function(msg) {
            $('#formcontent').css("border", "none").html(msg);
        }
    });
}

当它被调用时我想要遮蔽其他东西，那么应该禁用formcontent div和所有其他jquery函数，直到ajax调用成功为止。

更新：
调用callpage时应该禁用我的切换功能，直到成功为止：

$('#search').hover(
    function () {
        $('#search').animate({width: '400px'}, 500, function() {});
    },
    function () {
        $('#search').animate({width: '200px'}, 500);
        callpage();
    }
);

Answer 1

当AJAX调用以AJAXStart开头，然后使用ajaxComplete

隐藏它时，您可以调用叠加层

$(document).ajaxStart(function(){
   $("#overlay").show();
 });

$(document).ajaxComplete(function(){
   $("#overlay").hide();
 });

或者您可以将所有内容都放入通话中：

    $.ajax({
            type: form.attr('method'),
            beforeSend: function(){$("#overlay").show();},
            complete: function(){$("#overlay").hide();},
            url: form.attr('action'),
            data: form.serialize(),
            success:function(msg){$('#formcontent').css("border", "none").html(msg);}
            });

编辑我从其他答案中获取叠加

#modal-overlay {
    position: fixed;
    z-index: 10;
    background: black;
    display: block;
    opacity: .75;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
}

对于您的功能，您可以添加一些额外的逻辑并检查叠加是否可见

 $('#search').hover( 
  function () {
        var overlayDisplayed = $("#overlay").is(":visible");
        if(!overlayDisplayed){
          $('#search').animate({width: '400px'}, 500, function() { });
         }
  },
  function () {
        var overlayDisplayed = $("#overlay").is(":visible");
        if(!overlayDisplayed){
          $('#search').animate({width: '200px'}, 500);
          callpage();
         }
  }
);

Answer 2

人们通常使用CSS编写叠加div：

#modal-overlay {
    position: fixed;
    z-index: 10;
    background: black;
    display: block;
    opacity: .75;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
}

因此，在加载时，您只需拨打$("#modal-overlay").show()（或$("#modal-overlay").fadeIn()）即可完成加载，只需致电$("#modal-overlay").hide()（或$("#modal-overlay").fadeOut()）。

这个div遍历所有其他元素，因此您不需要禁用所有其他jQuery函数。

Answer 3

要禁用其他功能，请使用以下参数调用ajax：

async : false // (default: true)
// http://api.jquery.com/jQuery.ajax/

要设置阴影，您可以在 beforeSend 上创建一个半透明的div（顶部不会描述过程），浏览器窗口的宽度和高度，并在成功时将其删除，错误或完成（取决于您将使用的方法）。

Answer 4

这是我正在使用的完整解决方案:(正如我发布在https://stackoverflow.com/a/43490514/1726296）

以下是各节：

用于叠加的CSS。＆＃34;固定＆＃34;用于覆盖整个页面内容，而不仅仅是屏幕高度和宽度。您可以使用背景颜色或gif
附加到＆＃34; beforeSend＆＃34; jQuery Ajax调用事件。根据需要创建叠加并显示它。
完成请求后，它会从DOM

CSS：

.request-overlay {
    z-index: 9999;
    position: fixed; /*Important to cover the screen in case of scolling content*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}

JavaScript的：

$.ajax({
                url: '/*your url*/',
                beforeSend: function () {
                    $('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
                    $("#requestOverlay").show();/*Show overlay*/
                },
                success: function (data) {
                    /*actions on success*/
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    /*actions on error*/
                complete: function () {
                    $("#requestOverlay").remove();/*Remove overlay*/
                }
            });

关于＆＃34;禁用ajax调用上的所有其他jquery函数＆＃34;在你的问题？你什么意思？尽管Ajax本质上称为异步，但通常，调用由开发人员同步实现。在极少数情况下，页面中会同时发生并行Ajax调用。在这种情况下，由开发人员决定是否采用适当的技术。

如何在ajax调用上隐藏所有内容并禁用所有其他jQuery函数

4 个答案: