CODEWITHSUNDEEP
javascriptjqueryajax
tsure
tsure

Reputation: 315

jQuery $.ajax done callback not firing

I have the following code :

$("#loginSubmitButton").on("click",function(){
  var loginUserDetails = {
    email: $("#email").val(),
    password: $("#password").val()
  };

  //Send the AJAX request to authenticate the user
  $.ajax({
    type: "POST",
    url: "/somewebservice/v1/users/authenticate",
    data: JSON.stringify(loginUserDetails),
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
  }).done(function() {
      $("#loginResult").text("Login successful");
    })
    .fail(function() {
      $("#loginResult").text("Login failed");
    });

});

As per the jquery documentation (unless I am understanding something incorrectly) I expect the done to be fired if I receive a 200 OK from my web server. However, in chrome console I can see a 200 OK response but jquery seems to fire the fail handler.

Does anyone have any idea what I might be doing wrong here?

Upvotes: 13

Views: 30970

Answers (6)

hoogw
hoogw

Reputation: 5525

The ajax URL must be the same domain. You can't use AJAX to access cross-domain scripts. This is because of the Same Origin Policy.
add "dataType:JSONP" to achieve cross domain communication

use below code 

 $.ajax({
       URL: cross domain 

        dataType: 'jsonp'  
            // must use dataType:JSONP to achieve cross domain communication, otherwise done function would not called. 
           // jquery ajax will return "statustext error" at }).always(function(data){}


 }).always(function(data){
      alert(JSON.stringify(data));
   }

Upvotes: 1

Sam Strachan
Sam Strachan

Reputation: 545

There are lots of suggestions to remove

dataType: "json"

While I grant that this works it's probably ignoring the underlying issue. It's most likely caused by a parser error (the browser parsing the json response). Firstly examine the XHR parameter in either .always() or .fail().

Assuming it is a parser fail then why? Perhaps the return string isn't JSON. Or it could be errant whitespace at the start of the response. Consider having a look at it in fiddler. Mine looked like this:

Connection: Keep-Alive
Content-Type: application/json; charset=utf-8

{"type":"scan","data":{"image":".\/output\/ou...

In my case this was a problem with PHP spewing out unwanted characters (in this case UTF file BOMs). Once I removed these it fixed the problem while also keeping

dataType: json

Upvotes: 28

Bill Criswell
Bill Criswell

Reputation: 32921

A few things that should clear up your issue and a couple hints in general.

  1. Don't listen for a click on a submit button. You should wait for the submit event on the form.

  2. The data option for $.ajax isn't expecting a JSON string. It wants a serialized string or an array with name and value objects. You can create either of those easily with .serialize() or .serializeArray().

Here is what I was thinking for your script.

$('#form-with-loginSubmitButton').on('submit', function(e){


  e.preventDefault():

  var $form = $(this),
      data = $form.serializeArray();

  $.ajax({
    type: "POST",
    url: "/somewebservice/v1/users/authenticate",
    data: data
  }).done(function(result){
    console.log(result);
  });

});

Upvotes: 0

Can Bayburt
Can Bayburt

Reputation: 120

If your server returns empty string for a json response (even if with a 200 OK), jQuery treats it as failed. Since v1.9, an empty string is considered invalid json.

Whatever is the cause, a good place to look at is the 'data' parameter passed to the callbacks:

$.ajax( .. ).always(function(data) {
    console.log(JSON.stringify(data));
});

Its contents will give you an understanding of what's wrong.

Upvotes: 8

user2597843
user2597843

Reputation: 389

You need to remove:

dataType: "json"

Upvotes: 35

Bhupendra
Bhupendra

Reputation: 258

Need to remove , from dataType: "json",

 dataType: "json"

Upvotes: 3

Related Questions