jQuery的阿贾克斯后取消 [英] jquery ajax post canceled

问题描述

我想跟踪一组UI组件的鼠标点击事件上的一组页面。要做到这一点，我现在用的是下面的jQuery / AJAX调用（修剪出U）：

I want to track the mouse click events on a set of UI components on a set of pages. To do this, I am using the following jquery/ajax call(trimmed out u):

1.Ajax通话，这将增加了点击记录。

1.Ajax call which will add the click logging.

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的记录器（点击code是一个标识符的按钮/图像是点击）：

2.JQuery click event which will call the ajax logger(the clickCode is an identifier for which button/image was clicked):

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

以上的AJAX调用（1）是取消，由浏览器，只要按一下按钮被跟踪带给了新的一页。

The above ajax call(1.) is "canceled" by browser whenever the button click being tracked takes to a new page.

如果我改变aysnc'到'假'，则AJAX调用成功。

If I change 'aysnc' to 'false', then the ajax call succeeds.

此外，单击不采取新的一页成功的事件。只有点击事件采取新的页面都被取消。

Also, click events which do not take to a new page succeed. Only the click events taking to new page are being canceled.

我不希望拨打电话同步。

I do not want to make the call synchronous.

任何想法，可能是什么问题？我怎么能保证当点击事件发生到一个新的页面，异步调用之前完成？

Any ideas, what could be the issue? How can I guarantee that the asynchronous call before is finished when the click event takes to a new page?

推荐答案

由于它的异步，在code将完成前的记录也没发生过。什么，你会想要做的就是传递一个回调到异步调用。这将preserve异步特性，但仍允许你离开。事情是这样的：

Because it's async, the code will complete before the logging ever happens. What you'll want to do is pass a callback into the async call. This will preserve the async properties, but still allow you to leave. Something like this:

  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;
      });
  });
}); 

您可能会想修改的回调未离开页面的任何链接，当它是没有必要的。

You'll probably want to modify the callback for any links that aren't leaving the page, when it's not necessary.

这篇关于jQuery的阿贾克斯后取消的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！