Javascript AJAX Returns Error

Question

I have an AJAX call:

            $('#testyo').click(function(){
            $.ajax({
                type: 'GET',
                url: "../messages/drew",
                dataType: 'JSON',
                success:function(data){
                 alert(data);
                },
                error: function(data)
                {
                    console.log(data);
                  alert("Error: "+data);
                }
            });
            return false;
            });

It should be successful, but I get the alert("Error: "+data) alert. The data is [object Object]. So the alert just says Error: [object Object]

In my console.log(data)

    Object {readyState: 4, 
getResponseHeader: function, 
getAllResponseHeaders: function, 
setRequestHeader: function, 
overrideMimeType: function…}
abort: function ( statusText ) {always: function () {complete: function () {done: function () {error: function () {fail: function () {getAllResponseHeaders: function () {getResponseHeader: function ( key ) {overrideMimeType: function ( type ) {pipe: function ( /* fnDone, fnFail, fnProgress */ ) {progress: function () {promise: function ( obj ) {readyState: 4responseText: "drew"setRequestHeader: function ( name, value ) {arguments: nullcaller: nulllength: 2name: ""prototype: Object__proto__: function Empty() {}<function scope>state: function () {status: 200statusCode: function ( map ) {statusText: "OK"success: function () {arguments: nullcaller: nulllength: 0name: ""prototype: Object__proto__: function Empty() {}<function scope>then: function ( /* fnDone, fnFail, fnProgress */ ) {__proto__: Object

As you can see it does show the responseText: "drew" which is what I want. I'm just curious to know why is passing through my fail function, and not my success. Please let me know if there is anything else you would need to help me solve this.

Use `console.log` to print the error in the javascript console and check your object. — Alvaro, Sep 04 '14 at 13:57

score 2 · Accepted Answer · edited May 23 '17 at 12:15

According to the jquery documentation, the error parameter takes three inputs as parameters:

error:

Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."

The errormessage, and the error can be viewed if you modify the error function to take three parameters input and access the second argument to know what the error string is.

If you do this, it becomes easy to spot the error and know why the request failed. Once you spot the error, it becomes easy to fix it.

unexpected token probably means you've got a corrupted JSON response from the server. Also make sure the response the server component sends is of type JSON.

Set the response type in the server, for example, if the response is json:

response.setContentType("application/json");

See Also:

What is the correct JSON content type?

Refer: http://api.jquery.com/jquery.ajax/

Thank you for this. My error now says "SyntaxError: Unexpected token d" — user3591126, Sep 04 '14 at 14:12
Yes me JSON was corrupted. Fixed that and it fixed it. Thank you! — user3591126, Sep 04 '14 at 14:25

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

I see you get a 200 response but probably your server returns the wrong content type for json or it's completely invalid json.

In Firefox with firebug or chrome try to inspect the response and response headers like content type.

https://stackoverflow.com/a/11112320/1641941

edited May 23 '17 at 11:44

Community

1
1

answered Sep 04 '14 at 14:12

HMR

30,349
16
67
136

score 0 · Answer 3 · edited Feb 24 '16 at 13:42

0

When your responseText returns "drew", your response is not JSON, but String. Remove dataType: 'JSON' and jQuery will use auto detection. Then success function will be called.

JSON should be something like {"myText": "drew"}.

edited Feb 24 '16 at 13:42

John_West

2,139
4
21
40

answered Sep 04 '14 at 14:20

Niels Steenbeek

4,348
2
37
50

Javascript AJAX Returns Error

3 Answers3