Question

场景如下：我正在使用Jquery来实现一些ajax功能。例如：当用户单击“获取数据”按钮时，Jquery将调用.ajax函数从服务器获取一些数据。这个过程可能需要一些时间，所以我添加了.ajaxSend和.ajaxComplete函数来显示等待进程的一些动画（实际上是一个带有z-index的div中的'Loading Data'gif：999是其中div的顶部）。在等待过程中（“加载数据”），我想阻止用户点击其他按钮（例如：我有其他标签，小'加载数据'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，否则用户仍然可以单击其他按钮/选项卡。我不知道在这个过程中如何完全避免任何用户交互？谢谢！

Answer 1

我过去使用过jQuery Block UI并取得了很好的成功。适用于Ajax：

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

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

Answer 2

使用叠加层。

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

Answer 3

使用高于其他任何值的z-index显示div。 onsuccess，隐藏它。

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

Answer 4

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

Answer 5

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

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

Answer 6

我试图得到一个类似问题的答案，我最终到了这里。我知道这是一个古老的问题，但我想解决的是，您希望阻止互动的元素上的叠加层可以通过浏览器检查器轻松删除。

在我看来，解决这个问题的最佳方法是为整个页面设置一个全局布尔变量，并且当ajax不运行时至少在页面上执行操作（至少是敏感操作）或者只是关闭ajax的异步调用，因为事实上在这种情况下你似乎并不需要它（虽然我知道有些人会因为这个而把我钉在十字架上）。

如何在等待ajax的响应时阻止用户的交互

6 个答案: