等待ajax响应时如何防止用户交互？答案

【问题标题】：How to prevent users' interaction when waiting for ajax's response?等待ajax响应时如何防止用户交互？
【发布时间】：2011-01-12 07:41:27
【问题描述】：

我正在使用 jQuery 来实现一些 ajax 功能。例如：当用户单击“获取数据”按钮时，jQuery 将调用一个 ajax 函数从服务器获取一些数据。这个过程可能需要一些时间，所以我添加了 .ajaxSend 和 .ajaxComplete 函数来显示等待过程的一些动画（实际上是在 z-index: 999 的 div 中的 'Loading Data' gif 是其他 div 的顶部在<body>) 内。

在等待过程中（“加载数据”），我想阻止用户点击其他按钮（例如：我有其他选项卡，小“加载数据”gif下方的按钮）。我实现这一目标的方法是：

    $("body").ajaxSend(function()
     {
        $(this).append('<div id="loading">Data Loading<\/div>');
        $("div#error").remove();
        $(this).children().not('#loading').css({'opacity':0.22});   
     });
    $("body").ajaxComplete(function()
     {
        $("div#loading").remove();
        $(this).children().not('#loading').css({'opacity':1});
     });

但是，我不认为更改不透明度是最好的方法。除非您将不透明度设为 0，否则用户仍然可以单击其他按钮/选项卡。我不知道如何在此过程中完全避免任何用户交互？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我试图得到一个类似问题的答案，结果我来到了这里。我知道这是一个老问题，但我想说明的是，可以通过浏览器检查器轻松删除放置在您想要阻止交互的元素上的叠加层。

在我看来，解决此问题的最佳方法是为整个页面设置一个全局布尔变量，并在 ajax 未运行时仅在页面上执行操作（至少是敏感操作）或只是打开关闭对 ajax 的异步调用，因为实际上在这种情况下您似乎不需要它（尽管我知道有些人会因为我这样说而将我钉死在十字架上）。

【讨论】：

【解决方案2】：

我在Ben Nadel's ajax pipeline 上使用了一个变体。本质上，他用一个可以记录传出 ajax 请求的对象包装了 jQuery $.ajax 调用。

当 ajax 请求发出时，您记录请求名称。如果有更多请求尝试使用相同的名称发出，您不会执行它（可选地向用户提供消息）。

【讨论】：

【解决方案3】：

查看CSS/JavaScript Use Div to grey out section of page的答案。

【讨论】：

【解决方案4】：

我过去曾成功使用过 jQuery Block UI。适用于 Ajax：

http://malsup.com/jquery/block/

可能值得使用这样的插件，而不是手动编写类似的解决方案...

【讨论】：

好吧，这个插件很适合这个目的，但是我不想在这个阶段导入太多的插件。不管怎么说，还是要谢谢你。如果找不到更简单的解决方案，我可能会在稍后转向 BlockUI。

【解决方案5】：

使用叠加层。

http://jqueryui.com/demos/dialog/#modal

【讨论】：

实际上，我也在使用 JqueryUI。是的，我刚刚尝试了对话框的模态选项。很容易达到我想要的方块效果。但是，有没有办法删除对话框右上角的交叉（关闭按钮）？
看到这个stackoverflow.com/questions/896777/…
谢谢。我选择这个作为我的答案，因为我已经使用了 JqueryUI，这样我就不必只为 blockUI 效果导入另一个插件

【解决方案6】：

使具有 z-index 的 div 可见。 onsucess，隐藏它。

对于 IE6，考虑选择输入的可见性

【讨论】：

我希望我能投票（但我接下来的几个小时都没有），特别是对于 IE6 和表单元素的警告。