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, Jul 27 '11 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, Jul 27 '11 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, Jul 27 '11 at 17:36

score 1 · Answer 1 · answered Jul 27 '11 at 17:34

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 '11 at 17:34

hspain

17,528
5
19
31

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. – t2k32316 Jul 27 '11 at 17:40

score 0 · Answer 2 · edited May 23 '17 at 10:34

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 '17 at 10:34

Community

1
1

answered Jun 25 '12 at 18:38

Todd Moses

10,969
10
47
65

score 0 · Answer 3 · answered Jul 27 '11 at 17:38

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 '11 at 17:38

Johnny Craig

4,974
2
26
27

I'm not sending JSON. I'm trying to receive JSON... Sorry, maybe I wasn't clear in the original post. – t2k32316 Jul 27 '11 at 17:40
I understand, but you said your server is throwing a json parse error. – Johnny Craig Jul 27 '11 at 17:42
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. – t2k32316 Jul 27 '11 at 17:47
1

take out the line dataType: "json", i use ajax a lot but i never pass json as the datatype – Johnny Craig Jul 27 '11 at 17:57
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. – Johnny Craig Jul 27 '11 at 17:59
Taking out the line dataType: "json" gives the same result. Unfortunately, I am not able to modify the server side code as of right now... – t2k32316 Jul 27 '11 at 18:19

score 0 · Answer 4 · answered Jul 19 '22 at 22:29

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 '22 at 22:29

Nikita Jurievich Nickemail

11
1
3

And check for a wrong sumbols after echo result inbackend. – Nikita Jurievich Nickemail Jul 20 '22 at 23:48

jQuery not handling JSON response from AJAX POST

4 Answers4