jQuery not handling JSON response from AJAX POST

Question

Updated: I'm posting HTML FORM data but expecting to receive JSON data. I am not trying to POST JSON data.

I am trying to get a JSON response back from doing a HTML FORM POST request. I have successfully received a JSON back when using a simple HTML FORM POST request (i.e. not AJAX). My JSON response from the HTML FORM POST is this:

{"success":true,"data":1234567}

The problem occurs when I try to handle the request and response with jQuery's .ajax().

$.ajax({
    type: "POST",
    url: URL,
    data: data1,
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
        alert ("success");
    },
    error: function(xhr, status, error) {
        alert ("Error: " + error);
    }
});

After running the above code and debugging in Firebug, it appears that the POST request is going through, but something is going wrong on the handling of the response. Firebug tells me the following regarding the HTTP response from the POST request:

Response Headers
Cache-Control   private
Content-Length  31
Content-Type    application/json; charset=utf-8
...

So it appears that the 31 bytes of data is being sent. However, when debugging the actual Javascript, the error function gets called and the xhr object is this:

Object { readyState=0, status=0, statusText="error"}

I know the jQuery.ajax() document states that "In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown." However, I believe my JSON is valid as I have checked it at jsonlint.com.

What else could be going wrong?

Try adding contentType: "application/json; charset=utf-8" to $.ajax() — Mrchief
– Mrchief, Commented Jul 27, 2011 at 17:31
var data1 = "apikey="+apikey+"&firstname="+fName+"&lastname="+lName+....... I know data1 is not hte problem because the server is successfully receiving the data — t2k32316
– t2k32316, Commented Jul 27, 2011 at 17:32
Adding contentType: "application/json; charset=utf-8" causes the POST request to not go through to the server successfully. I'm not POSTing JSON data. I'm POSTing simple FORM data, but the response is in JSON. — t2k32316
– t2k32316, Commented Jul 27, 2011 at 17:36

hspain · Accepted Answer · 2011-07-27 17:34:11Z

1

It looks to me like you are getting a server error. I would check the status code of the response and fix whatever is causing the request to fail on the server.

answered Jul 27, 2011 at 17:34

hspain

17.6k5 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

t2k32316 Over a year ago

Using Firebug, the status code is 200 and the response headers are what I wrote above. The response headers show up in Firebug in the "Headers" tab, but the "Response" tab shows nothing. The header indicates that there will be 31 bytes of data which is how much I am expecting. However, I put breakpoints in the success and error functions of the jQuery code, and the code stops in the error function, with the xhr object as show above in my original post.

Johnny Craig · Accepted Answer · 2011-07-27 17:38:28Z

0

your getting an error because data1 is not formatted in json, so when it receives the data it gets a parse error. data1 needs to be formatted:

data1={"apikey":apikey,
        "firstname":fName
      }

answered Jul 27, 2011 at 17:38

Johnny Craig

4,9902 gold badges28 silver badges28 bronze badges

6 Comments

t2k32316 Over a year ago

I'm not sending JSON. I'm trying to receive JSON... Sorry, maybe I wasn't clear in the original post.

Johnny Craig Over a year ago

I understand, but you said your server is throwing a json parse error.

t2k32316 Over a year ago

I've checked the server and it successfully receives and stores the POST data that I sent (from data1). Are you sure that the xhr object being { readyState=0, status=0, statusText="error"} in the Firebug debugger means that the server is throwing a json parse error? I think that there is something wrong with my jQuery .ajax() code, not the server.

Johnny Craig Over a year ago

take out the line dataType: "json", i use ajax a lot but i never pass json as the datatype

Johnny Craig Over a year ago

possibly you need to define {"success":true,"data":1234567} as an object on the server side and then pass the object itself to the callback.

|

Community · Accepted Answer · 2017-05-23 10:34:26Z

0

I was having the same problem. It seems that this is an issue with Cross Domain.

Finding this SO answer: https://stackoverflow.com/a/7605563/154513

helped me.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Jun 25, 2012 at 18:38

Todd Moses

11k11 gold badges50 silver badges65 bronze badges

Comments

Nikita Jurievich Nickemail · Accepted Answer · 2022-07-19 22:29:51Z

0

Some times Jquery return Internal Error 500 for currectly data.

There is example for read the same json data withour error

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqres.in/api/products/3", true);
xhr.onload = function(){
    console.log(xhr.responseText);
};
xhr.send();

answered Jul 19, 2022 at 22:29

Nikita Jurievich Nickemail

211 silver badge4 bronze badges

1 Comment

Nikita Jurievich Nickemail Over a year ago

And check for a wrong sumbols after echo result inbackend.

Collectives™ on Stack Overflow

jQuery not handling JSON response from AJAX POST

4 Answers 4

1 Comment

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related