Ajax call fires error event but returns 200 ok

Question

$.ajax({
        url: 'http://intern-dev01:50231/api/language',
        type: 'GET',
        dataType: 'json',
        success: function() {
            console.log('It Works!');
        },
        error: function (request,status, error) {
            console.log(error);
            alert(status);
        }
    });

Why do this ajax call not work ?? if i call in browser it works fine :/.

This is what fiddler returns:

HTTP/1.1 200 OK
Content-Length: 122
Content-Type: application/json; charset=utf-8
Server: Microsoft-HTTPAPI/2.0
Date: Fri, 26 Apr 2013 06:56:40 GMT

[{"LanguageId":1,"LanguageName":"Dansk"},{"LanguageId":2,"LanguageName":"Tysk"},{"LanguageId":3,"LanguageName":"Engelsk"}]

Solution 1

You have to check ajax response if it is valid or not. When you specify in ajax:

dataType: 'json',

jQuery will fire the error event if the response cannot be parsed as JSON, even if server returns 200 OK. Check the data returned from the server and make sure it is valid JSON (try JSONLint service).

If the returned data is not JSON or it has syntax errors then fix them in your server side code. You can just return {} from the server side script.

Also try this.

$.ajax({
    url: 'http://intern-dev01:50231/api/language',
    type: 'GET',
    cache: false,        
    complete: function (xhr, status) {
      if (status === 'error' || !xhr.responseText) {
          console.log(error);
          alert(status);
      }
      else {
       console.log('It Works!');.
      }
    }        
});

Solution 2

There is a parsing error since the status shows 200 OK. The problem lies in the datatype:json. To test this, remove the line and it should work. In order to fix this, you can change it to the datatype:text. See this link too for similar question

Solution 3

Check the url parameter and make sure its the same as the loaded page. You might be doing a cross-domain ajax call. If you were wanting to make a cross-domain ajax call, notice that the only dataTypes allowed to make cross-domain requests are "script" and "jsonp".

Ran into this issue in a dev environment where the URL was an IP address and the page loaded a domain-name pointing to that ip.

Comments

[user2314110]

If i use jsonp i get parseError

[Bharat Chodvadiya]

@user2314110 Just remove dataType: 'json' and try. See my edit answer.

[Philip Murphy]

Note: if response is empty (e.g. "") $.ajax will report an error if dataType is set to json. As @BharatChodvadiya states if you remove the dataType it should work.

[Alexey Shevelyov]

It is basically a key value pair so it should not really matter the way it is pre -structured. I don't think that whatever builds this request objects looks at if dataType key is before or after some other key. It simply constructs it. The goal here is find the real cause.

[Arco Voltaico]

It's just why my Symfony Dynamic Forms were triggering the error event, because the ajax request returns me the html of the updated form !!!

[Brett Mathe]

I was returning plain text instead of json.