javascript - ajax调用后为什么不能浏览到其他页面？

Question

在遗留的 MVC 5 网络应用程序中，我希望用户能够在单击对长时间运行的操作进行 ajax 调用的按钮后继续浏览。

(注意:操作返回void - 我对响应不感兴趣)

When I click the button I am unable to make any other requests until the action completes.

编辑:这是ajax代码:

$('#EmailReport') //
    .click(function() {
        $.ajax({
            type: "POST",
            url: '/Home/EmailReport',
            complete: function() {console.log("done")},
            async: true
        });
    });

Controller

[HttpPost]
public async Task EmailReport()
{
   // for testing - sleep for 10 seconds
   await Task.Delay(TimeSpan.FromSeconds(10));
}

这是 Chrome 开发工具中的屏幕截图:

EmailReport 是 ajax 调用，底部的两个请求是我试图浏览到另一个页面 - 如您所见，第一个请求是 pending 以及任何后续请求请求被取消

有没有人知道如何解决或解决此问题？

Answer 1

问题在于，您的操作会等待任务完成。不要让它等待并在您开始任务后立即返回。

[HttpPost]
public void EmailReport()
{
   // for testing - sleep for 10 seconds
   var myTask = Task.Delay(TimeSpan.FromSeconds(10));
   myTask.Start();
}

您的请求被取消，因为它是一个页面重定向请求，旧的页面重定向请求在发出新请求时被取消(例如，当您点击链接 2 次时，第一次点击被忽略)。这是浏览器实现它的方式。它与您问题的根源无关。