Question

当用户按下＆＃39;处理＆＃39;我的应用程序上的按钮，我希望应用程序触发一个AJAX请求，然后立即将用户重定向到另一个屏幕，而无需等待AJAX请求的结果。我相信我已经对它进行了适当的编码，但我注意到屏幕正在等待AJAX在重定向之前完成。我错过了下面的内容吗？

$('#process-btn').on('click', function() 
{
    // disable the process & cancel buttons to prevent 
    // double submission or interruption
    $('#cancel-btn').addClass('disabled');
    $(this).addClass('disabled');

    // trigger the AJAX require to process the uploaded file on the server side
    $.ajax({
        url: $('#form').attr('action'),
        type: 'post',
        data: $('#form').serialize(),
        success: function() {
            //on success
        }
    });

    // redirect the user to view list
    // this line is not being called immediately - 
    // this is being called only after AJAX returns
    window.location.replace( www_root + 'Home/index' );
});

Answer 1

因为你有这个处理程序挂钩的按钮是一个表单的提交按钮（根据你的评论）并且你没有阻止该按钮的默认行为，那么表单提交将立即发生并且提交时返回时，无论代码尝试做什么，它都会更改页面。

所以，问题是返回的表单提交是否克服了您的代码尝试做的事情。

在你的ajax通话结束之前，通过重定向可能会有点危险。浏览器可能会在实际发送TCP缓冲区之前删除ajax连接，因为TCP在发送缓冲区之前通常会有一个小延迟，以便将连续数据收集到公共数据包中。短暂超时后重定向或重定向complete事件将会更安全，无论ajax成功与否，都将调用该事件。

如果您真的想在ajax调用完成之前进行重定向，可以在此代码中试验超时值（此处显示为设置为500毫秒），以查看在多个浏览器中可靠运行的内容：

$('#process-btn').on('click', function(e) {
    // prevent default form post
    e.preventDefault();

    // disable the process & cancel buttons to prevent 
    // double submission or interruption
    $('#cancel-btn').addClass('disabled');
    $(this).addClass('disabled');

    // trigger the AJAX require to process the uploaded file on the server side
    $.post($('#form').attr('action'), $('#form').serialize());

    // redirect the user to view list
    // this being called after a short delay to "try"
    // to get the form ajax call sent, but not "wait" for the server response
    setTimeout(function() {
        window.location.replace( www_root + 'Home/index' );
    }, 500);
});

另请注意，我已添加e.preventDefault()并将e参数添加到事件处理程序，以确保默认情况下不会发布表单，只能通过ajax代码发布。 / p>

并且，超时时间设置为500毫秒。您需要的是足够的时间让主机中的TCP基础结构在您开始重定向之前发送所有表单数据。我看到提到一个＆＃34;文件上传＆＃34;在你的评论中。如果这个表单实际上传了一个文件，那可能会超过500毫秒。如果它只是发送一些表单字段，假设没有连接打嗝就应该很快。

警告：这样做并不是将数据提供给服务器的100％可靠方式。在与服务器连接之前，可能很容易出现一些条件，只需要比平时花费更长的时间来进行DNS查找，否则您的服务器可能需要更长时间才能响应初始连接，然后才能将数据发送给它。唯一100％可靠的方法是等到ajax调用成功，如其他地方所述。

如果你改变了服务器处理ajax调用的方式，那么你或许可以充分利用两个世界（可靠性+快速响应），这样一旦它收到数据，它就会返回一个成功的响应（例如，在几毫秒之后）接收数据后，然后在发回成功的响应后，浏览器可以可靠地进行重定向，实际处理数据需要2-3分钟。请记住，在完成处理请求以返回响应之前，您不会等待。然后，您知道服务器已收到数据，但浏览器不必等待处理时间。如果您不希望此ajax调用以这种方式工作，您可以将参数传递给ajax调用，以指示服务器是否需要快速响应。

Answer 2

为什么不试试这个：

  $.ajax({
        url: $('#form').attr('action'),
        type: 'post',
        data: $('#form').serialize(),
        success: function() {window.location.replace( www_root + 'Home/index' );}
  });

Javascript不会在AJAX调用之外异步进行

2 个答案: