javascript - jquery ajax post canceled - Stack Overflow

admin管理员组

文章数量:1296401

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

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

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

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?

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

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

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

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?

• javascript
• jquery
• ajax
• post

Share Improve this question Follow asked Jun 12, 2012 at 4:35 hsemuhsemu 6111 gold badge11 silver badge33 bronze badges 4

• You have to use a synchronous call, otherwise the form will be submitted and the user will be taken to the new page. When the form is submitted, the page unloads, and therefore AJAX calls are cancelled - that's how browsers work... – Ian Commented Jun 12, 2012 at 4:50
• can anyone tell me about the single quotes '' that is using in ajax call?? is work with the single quote also 'type' or 'success' and all because i used without single quotes.. – jogesh_pi Commented Jun 12, 2012 at 4:58
• 1 You don't have to use a synchronous call, you just have to make sure the work isn't done until after the async call is finished. – Dan Crews Commented Jun 12, 2012 at 5:08
• Hi ianpgall, Can I make the page unload event wait for the ajax call to finish? (I'm one week old to js,ajax please dont mind if this question is very silly) – hsemu Commented Jun 12, 2012 at 5:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Because it's async, the code will plete 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.

Are you using Firebug to track requests? If so, that is not entirely correct. If you use Fiddler to examine requests, you can see they are successful. Cancelled status mostly means "browser cancelled waiting for response", which you don't really care about anyway.

I fixed using CORS headers on the AJAX called endpoint server.

See also: http://blogs.mulesoft/cross-domain-rest-calls-using-cors/
Also: http://www.biodalliance/cors.html

本文标签： javascriptjquery ajax post canceledStack Overflow