6

我想在一组页面上跟踪一组 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.将调用ajax记录器的JQuery单击事件（clickCode是单击按钮/图像的标识符）：

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

每当被跟踪的按钮单击进入新页面时，浏览器都会“取消”上述 ajax 调用（1.）。

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

此外，不会进入新页面的点击事件会成功。只有进入新页面的点击事件被取消。

我不想使呼叫同步。

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

4

3 回答 3

3

因为它是异步的，所以代码将在日志记录发生之前完成。您要做的是将回调传递给异步调用。这将保留异步属性，但仍允许您离开。像这样的东西：

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

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

于 2012-06-12T04:49:53.277 回答
0

我修复了在名为端点服务器的 AJAX 上使用CORS标头。

另见：http: //blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
另见：http: //www.biodalliance.org/cors.html

于 2013-08-14T03:02:22.357 回答
0

您是否使用 Firebug 来跟踪请求？如果是这样，那并不完全正确。如果您使用 Fiddler 检查请求，您可以看到它们是成功的。已取消状态主要意味着“浏览器已取消等待响应”，无论如何您并不真正关心。

于 2012-06-12T04:52:52.900 回答