ajax表单多个请求怎么办

Question

假设我的导航中有两个链接，它们在 mvc4 中使用 Ajax.BeginForm 和不显眼的 javascript。第一个向数据库发出一个请求，第二个向数据库发出两个请求，因此花费的时间是原来的两倍。假设每个请求需要一秒钟。现在用户单击第二个链接，然后立即单击第一个链接。按此顺序发生的事情的示意图：

1. 用户点击链接2
2. 用户点击链接1
3. 为链接 1 加载页面
4. 已为链接 2 加载页面

假设用户这样做是因为他在点击后立即意识到了自己的错误。现在，他看到的不是预期的第 1 页，而是一瞬间，然后他又看到了第 2 页，即使他不想完全阅读它。

首先，这是一个问题吗？如果是，是否有关于如何以最合适的方式解决它的示例？或者我只是在田野里追风而应该忘记它？

Answer 1

当您进行新的 AJAX 调用时，您应该始终中止之前的 AJAX 调用。它将帮助您的服务器并为用户提供所需的结果。

var xhr;

function makeRequest() {
    if (xhr) 
        xhr.abort();

    xhr = $.ajax(...);
}

Answer 2

也许您应该考虑在请求进行时禁用链接。也许只需在您的页面上添加一个简单的叠加层，使用微调器来防止用户在请求完成之前点击其他链接。

Answer 3

CSS

#loading{
position: absolute;
z-index: 99998;
top: 0px;
left: 0px;
width: 100%;
height: 1161px;
background-color: rgb(255, 255, 255);
opacity: 0.01;
background-position: initial initial;
background-repeat: initial initial;
}

HTML

  <div id="loading"></div>

脚本

 $( document ).ajaxStart(function() {
      $( "#loading" ).show();
    });

$( document ).ajaxComplete(function( event,request, settings ) {
   $( "#loading" ).hide();
});