Ajax request returns 200 OK, but an error event is fired instead of success
JavascriptJqueryasp.netAjaxJsonJavascript Problem Overview
I have implemented an Ajax request on my website, and I am calling the endpoint from a webpage. It always returns 200 OK, but jQuery executes the error event.
I tried a lot of things, but I could not figure out the problem. I am adding my code below:
###jQuery Code
var row = "1";
var json = "{'TwitterId':'" + row + "'}";
$.ajax({
type: 'POST',
url: 'Jqueryoperation.aspx?Operation=DeleteRow',
contentType: 'application/json; charset=utf-8',
data: json,
dataType: 'json',
cache: false,
success: AjaxSucceeded,
error: AjaxFailed
});
function AjaxSucceeded(result) {
alert("hello");
alert(result.d);
}
function AjaxFailed(result) {
alert("hello1");
alert(result.status + ' ' + result.statusText);
}
###C# code for JqueryOpeartion.aspx
protected void Page_Load(object sender, EventArgs e) {
test();
}
private void test() {
Response.Write("<script language='javascript'>alert('Record Deleted');</script>");
}
I need the ("Record deleted")
string after successful deletion. I am able to delete the content, but I am not getting this message. Is this correct or am I doing anything wrong? What is the correct way to solve this issue?
Javascript Solutions
Solution 1 - Javascript
jQuery.ajax
attempts to convert the response body depending on the specified dataType
parameter or the Content-Type
header sent by the server. If the conversion fails (e.g. if the JSON/XML is invalid), the error callback is fired.
Your AJAX code contains:
dataType: "json"
In this case jQuery:
> Evaluates the response as JSON and returns a JavaScript object. […] > The JSON data is parsed in a strict manner; any malformed JSON is > rejected and a parse error is thrown. […] an empty response is also > rejected; the server should return a response of null or {} instead.
Your server-side code returns HTML snippet with 200 OK
status. jQuery was expecting valid JSON and therefore fires the error callback complaining about parseerror
.
The solution is to remove the dataType
parameter from your jQuery code and make the server-side code return:
Content-Type: application/javascript
alert("Record Deleted");
But I would rather suggest returning a JSON response and display the message inside the success callback:
Content-Type: application/json
{"message": "Record deleted"}
Solution 2 - Javascript
You simply have to remove the dataType: "json" in your AJAX call
$.ajax({
type: 'POST',
url: 'Jqueryoperation.aspx?Operation=DeleteRow',
contentType: 'application/json; charset=utf-8',
data: json,
dataType: 'json', //**** REMOVE THIS LINE ****//
cache: false,
success: AjaxSucceeded,
error: AjaxFailed
});
Solution 3 - Javascript
I've had some good luck with using multiple, space-separated dataType
s (jQuery 1.5+). As in:
$.ajax({
type: 'POST',
url: 'Jqueryoperation.aspx?Operation=DeleteRow',
contentType: 'application/json; charset=utf-8',
data: json,
dataType: 'text json',
cache: false,
success: AjaxSucceeded,
error: AjaxFailed
});
Solution 4 - Javascript
This is just for the record since I bumped into this post when looking for a solution to my problem which was similar to the OP's.
In my case my jQuery Ajax request was prevented from succeeding due to same-origin policy in Chrome. All was resolved when I modified my server (Node.js) to do:
response.writeHead(200,
{
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "http://localhost:8080"
});
It literally cost me an hour of banging my head against the wall. I am feeling stupid...
Solution 5 - Javascript
I reckon your aspx page doesn't return a JSON object. Your page should do something like this (page_load)
var jSon = new JavaScriptSerializer();
var OutPut = jSon.Serialize(<your object>);
Response.Write(OutPut);
Also, try to change your AjaxFailed:
function AjaxFailed (XMLHttpRequest, textStatus) {
}
textStatus
should give you the type of error you're getting.
Solution 6 - Javascript
I have faced this issue with an updated jQuery library. If the service method is not returning anything it means that the return type is void
.
Then in your Ajax call please mention dataType='text'
.
It will resolve the problem.
Solution 7 - Javascript
You just have to remove dataType: 'json'
from your header if your implemented Web service method is void.
In this case, the Ajax call don't expect to have a JSON return datatype.
Solution 8 - Javascript
See this. It's also a similar problem. Working I tried.
Dont remove dataType: 'JSON',
Note: Your response data should be in json format
Solution 9 - Javascript
Use the following code to ensure the response is in JSON format (PHP version)...
header('Content-Type: application/json');
echo json_encode($return_vars);
exit;
Solution 10 - Javascript
I had the same issue. My problem was my controller was returning a status code instead of JSON. Make sure that your controller returns something like:
public JsonResult ActionName(){
// Your code
return Json(new { });
}
Solution 11 - Javascript
Another thing that messed things up for me was using localhost
instead of 127.0.0.1 or vice versa. Apparently, JavaScript can't handle requests from one to the other.
Solution 12 - Javascript
If you always return JSON from the server (no empty responses), dataType: 'json'
should work and contentType
is not needed. However make sure the JSON output...
- is valid (JSONLint)
- is serialized (JSONMinify)
jQuery AJAX will throw a 'parseerror' on valid but unserialized JSON!
Solution 13 - Javascript
I had the same problem. It was because my JSON response contains some special characters and the server file was not encoded with UTF-8, so the Ajax call considered that this was not a valid JSON response.
Solution 14 - Javascript
Your script demands a return in JSON data type.
Try this:
private string test() {
JavaScriptSerializer js = new JavaScriptSerializer();
return js.Serialize("hello world");
}