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!

Solution 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.

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

Comments

[devnull69]

Is the URL on the same domain, subdomain and protocol as your current page?

[Manigandan Arjunan]

use firebug or chrome's developer tool and by clicking on the network and xhr you can see the response from the url

[Murali Murugesan]

Did you check with Firebug/Fiddler/Chrome dev tool's Network tab to see what was the response code and text?

[caiocpricci2]

The URL is in a different domain. I can't check with firebug because I'm running this on a phone it's a Phonegap app. I probably should have said that in the question!

[Kodemon]

Seems its returning something other than valid JSON? Try accepting a different datatype and see what content is coming back?

[caiocpricci2]

What other kind of datatype? Sorry if it's a dumb question, I'm not very experienced in this area.

[caiocpricci2]

@SnapGravy you hit a point there, I tried datatype:html and got a whole HTML page. I'm guessing that's not right.

[Kodemon]

@gameower That is why it goes to error, seems the html page doesnt really output anything so your error will be null. Make sure the URL request gives back proper JSON data. If you get errors try requesting dataType: "text" to make sure youre getting proper data, at least you will see what you are actually getting back.