jquery ajax发布取消了

Question

我想跟踪一组页面上的一组UI组件上的鼠标单击事件.为此,我使用以下jquery/ajax调用(修剪掉你):

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.).

如果我将'aysnc'更改为'false',则ajax调用成功.

此外,单击未进入新页面的事件也会成功.仅取消进入新页面的点击事件.

我不想让呼叫同步.

任何想法,可能是什么问题？当click事件进入新页面时,如何保证之前的异步调用完成？

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

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