jquery ajax 帖子已取消

Posted 2023-02-22

【中文标题】jquery ajax 帖子已取消

【英文标题】：jquery ajax post canceled

【发布时间】：2012-06-14 23:28:24

【问题描述】：

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

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

只要被跟踪的按钮点击进入新页面，浏览器就会“取消”上述 ajax 调用 (1.)。

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

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

我不想让调用同步。

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

【问题讨论】：

你必须使用同步调用，否则表单将被提交，用户将被带到新页面。提交表单后，页面卸载，因此 AJAX 调用被取消 - 这就是浏览器的工作方式......

谁能告诉我在 ajax 调用中使用的单引号 ''？也可以使用单引号 'type' 或 'success' 以及所有因为我没有使用单引号..

您不必使用同步调用，您只需确保在异步调用完成之前工作不会完成。

嗨 ianpgall，我可以让页面卸载事件等待 ajax 调用完成吗？ （我是 js 一周大，ajax 如果这个问题很傻，请不要介意）

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案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;
      );
  );
); 

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