How to debug ajax request error?

Question

I'm trying to get a JSON, hosted in a local server here, but for some reason it doesn't work. If i hit my url on the browser it returns the Json correctly and If I use another URL, I do get some data.

My original getJson method:

getJson:

$.getJSON(url, 

                    function(data) {
                        console.log('got something'); 
                        alert(data);    

                    });

Now I want to see exactly what's wrong. I've rewritten it as a Ajax request, and on my error callback jqxhr gives me a lot of things that I don't understand. Can i get more details about this error ?

TextStatus value is "error"

errorThrown is null

    $.ajax({
                  url: url,
                  dataType: 'json',
                  success:  function(data) {
                        console.log('got something'); 
                        alert(data);    
                        },
                error: function(jqxhr,textStatus,errorThrown)
                    {
                        console.log(jqxhr);
                            console.log(textStatus);
                            console.log(errorThrown);                               

                            for (key in jqxhr)
                                alert(key + ":" + jqxhr[key])                                                                 
                            for (key2 in textStatus)
                                alert(key + ":" + textStatus[key])
                            for (key3 in errorThrown)
                                alert(key + ":" + errorThrown[key])

                   //<--- All those logs/alerts, don't say anything helpful, how can I understand what error is going on? ---->

                }});

Last, the json i'm supposed to get back is

[{"message": "login failed"}]

And I can't use firebug, chrome console, or any other dev tools because this is a mobile app, developed using Phonegap!

Answer 1

I am gonna put my comments into answer form, its not a solution to your problem but its a good way to troubleshoot various return issues with jQuery Ajax.

When you are requesting a certain datatype in this case dataType: 'json' you are requesting a specific type of data. If that specific dataType is not returned it will pass to the error function.

If your error message isnt providing information that will explain your problem then try requesting a dataType that is more friendly. This way you can see what your request is actually returning. If its data other than your requested dataType then that is your issue and you can work it out from there.

dataType like html or text will be very open to give you the exact data returned from the requested url and you can solve your issues from there.

Hope it helps a little.

Answer 2

jqxhr - XrayWrapper
textStatus - represents the text representation of Https response status (eg. success, error)
errorThrown - XMLHttpRequest

jqxhr.status - gives the Http response code such as 200, 404, 500 so on..

Use this code snippet to print all the key in the json object

var output = '';
for (property in object) {
  output += property + ': ' + object[property]+'; ';
}
console.log(output);