jQuery AJAX POST 请求取消了。

Question

我希望能够追踪一组页面上一组UI组件的鼠标点击事件。为此，我正在使用以下jquery/ajax调用（已削减u）：

1.添加点击日志的Ajax调用。

myClickLogger = { 
  endpoint: '/path/to/my/logging/endpoint.html',
  logClickEvent: function(clickCode) {
     $.ajax({
         'type':    'POST',
         'url':     this.endpoint,
         'async':   true,
         'cache':   false,
         'global':  false,
         'data':    {
            'clickCode':clickCode
         },
         'error': function(xhr,status,err){
             alert("DEBUG: status"+status+" \nError:"+err);
         },  
         'success': function(data){
             if(data.status!=200){
                 alert("Error occured!");
             }   
         }   
     }); 
  }   
};

2. JQuery点击事件，将调用ajax日志记录器（clickCode是标识被点击的按钮/图片的标识符）：

$(document).ready(function() {
  $(".myClickEvent[clickName]").click(function() {
      var clickCode = $(this).attr("clickName");
      myClickLogger.logClickEvent(clickCode);
  });
}); 

上述ajax调用(1.)在按钮被跟踪的情况下，当跳转到新页面时，浏览器会"取消"此调用。

如果我将'async'改为'false'，则ajax调用将成功。

此外，不跳转到新页面的点击事件将成功。只有跳转到新页面的点击事件才会被取消。

我不想使调用同步。

你有什么想法，可能是什么问题？如何保证异步调用在点击事件跳转到新页面之前完成？

- hsemu

---

你必须使用同步调用，否则表单将被提交并且用户将被带到新页面。当表单被提交时，页面会卸载，因此AJAX调用会被取消 - 这就是浏览器的工作原理... - Ian

有人能告诉我在 AJAX 调用中使用的单引号 '' 吗？它是否也适用于单引号 'type' 或 'success' 等，因为我没有使用单引号。 - jogesh_pi

你不必使用同步调用，只需确保工作在异步调用完成后才完成。 - Dan Crews

嗨ianpgall，我能让页面卸载事件等待ajax调用完成吗？（我对js、ajax只有一周的经验，请不要介意这个问题很愚蠢） - hsemu

Answer 1

因为它是异步的，所以代码将在记录之前完成。您需要做的是将回调函数传递到异步调用中。这将保留异步属性，但仍允许您离开。像这样：

  logClickEvent: function(clickCode, callback) {
     $.ajax({
         'type':    'POST',
         'url':     this.endpoint,
         'async':   true,
         'cache':   false,
         'global':  false,
         'data':    {
            'clickCode':clickCode
         },
         'error': function(xhr,status,err){
             alert("DEBUG: status"+status+" \nError:"+err);
         },  
         'success': function(data){
             if(data.status!=200){
                 alert("Error occured!");
             } else {
                 callback();
             }
         }   
     }); 
  }

$(document).ready(function() {
  $(".myClickEvent[clickName]").click(function(e) {
      e.preventDefault(); // This will prevent the link from actually leaving right away
      var clickCode = $(this).attr("clickName");
      var href = $(this).attr('href');
      myClickLogger.logClickEvent(clickCode, function(href){
          if (href)
              window.location = href;
      });
  });
}); 

当不必要时，您可能需要修改任何未离开页面的链接的回调函数。

- Dan Crews

Answer 2

我使用CORS头在AJAX调用的端点服务器上进行了修复。

另请参阅：http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
还有：http://www.biodalliance.org/cors.html

- alanjds

Answer 3

你是否正在使用Firebug来跟踪请求？如果是，那并不完全正确。如果你使用Fiddler来检查请求，你可以看到它们是成功的。取消状态大多意味着“浏览器取消等待响应”，而这对你来说并不重要。

- Ilia G