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

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();
         }
  }
);