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

【问题标题】：How to shadow everything and disable all other jQuery functions on ajax call如何在 ajax 调用中隐藏所有内容并禁用所有其他 jQuery 函数
【发布时间】：2012-02-17 20:37:16
【问题描述】：

我有这个 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();
    }
);

【问题讨论】：

我想他想要一个模态窗口。
我的意思是淡入淡出 :) 是的模态窗口
确保将async: false, 放入您的ajax 以便它等待。

标签： javascript jquery

【解决方案1】：

人们通常使用 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 函数。

【讨论】：

我在你的代码中看不到任何切换调用，你能更具体一点吗？

【解决方案2】：

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

【讨论】：

显示模型叠加时，我的切换功能仍然有效。我已经用这个函数更新了我的问题。
@Railsbeginner 我更新了我的答案。基本上你可以检查你的功能，如果覆盖是可见的，然后采取相应的行动
Here 和 here 另一个具有更多叠加效果。希望有所帮助。

【解决方案3】：

使用此参数禁用其他功能调用 ajax：

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

要阴影，您可以在 beforeSend 顶部创建一个半透明 div（我不会描述该过程），并在 成功时将其删除、error 或 complete（取决于您将使用什么方法）。

【讨论】：

【解决方案4】：

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

以下是部分：

用于叠加的 CSS。 “固定”用于覆盖整个页面内容，而不仅仅是屏幕高度和宽度。您可以使用背景颜色或 gif
附加到 jQuery Ajax 调用的“beforeSend”事件。按需创建叠加层并显示它。
请求完成后，它会从 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*/
                }
            });

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

【讨论】：