jQuery Ajax，在 ajax 进行时防止刷新按钮

Question

您好，我必须执行类似的操作，当 ajax 正在进行时，不允许用户刷新页面。

这是我的代码

$('#submit').click(function() {
        $(function() {
        $(".col1").mask("Generating csv...."); //This will generate a mark, Here i would like to prevent the user from doing any sort of operation.
        var to = $('#filters_date_to').val();
        var from = $('#filters_date_from').val();
        $.ajax({
            url:"../dailyTrade/createCsv?filters[date][to]="+to+"&filters[date][from]="+from,success:function(result){
                if(result) {
                     $(".col1").unmask(); //Here we can unlock the user from using the refresh button.
                     window.location = '../dailyTrade/forceDownload?file='+result; 
                     setTimeout('location.reload(true);',5000);
                }
            }
            });

        });
   });

任何建议。

Answer 1

您能做的最好的事情是使用 onbeforeunload 向用户显示一条消息，说明请求正在进行中，并询问他们是否确定要继续。

例如

var req;

window.onbeforeunload = function() { 
 if(req) {
   return 'Request in progress....are you sure you want to continue?'; 
 }
};


//at some point in your code
req = //your request...

您不能以任何方式阻止用户使用 JS 或其他任何方式离开您的页面。

Answer 2

我怀疑你是否应该这样做。

$(window).bind('beforeunload',function(){
    return 'are you sure you want to leave?';    
});

如果您谈论的是网页上的刷新“html 按钮”，则可以轻松完成。就在您进行 ajax 调用之前，禁用刷新按钮并在 ajax 调用的成功/错误功能上启用它。

禁用按钮

$("#refreshBtn").attr("disabled", "disabled");

启用按钮

$("#refreshBtn").removeAttr("disabled");

Answer 3

你不能仅仅通过插入 JavaScript 代码来做到这一点。

我能想到的唯一方法是：

1. 使用同步 ajax 调用，这样浏览器应该会冻结（但它会通知用户脚本处理时间过长，用户可以停止执行）
2. 编写将修改浏览器行为的浏览器插件（例如，防止刷新您预设的 url 页面）

这两种方式都很难看，我不建议这样做。

---

您应该修改您的脚本，以便它可以在页面已刷新时恢复执行（使用 HTML5 localStorage）。

http://www.w3schools.com/html/html5_webstorage.asp

---

在您的情况下，我会输入 localStorage 简单状态（布尔值）来检查是否发生了 ajax 调用。如果确实发生了，那么只需尝试再次调用相同的 url，您将获得文件名。但是在服务器端（如果你还没有做的话）你应该实现缓存，所以当同一个 url 被调用两次时，你不需要创建两个单独的文件，它可以是同一个文件（服务器在硬件上会轻得多资源）。