Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ajax request returns 200 OK, but an error event is fired instead of success

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?

like image 207
Pankaj Mishra Avatar asked May 31 '11 11:05

Pankaj Mishra


People also ask

Why is ajax success not working?

ajax post method. The reason was my response was not in the JSON format so there was no need for the dataType: 'json' line in the submit method. In my case, the returned response was in text format that's why it was not going to success event. Solution: Remove dataType: 'json' line.

How does error handle response in ajax?

When there is an AJAX error response or the AJAX request times out, you'll want to log as much information as you have, including the error message that jQuery gives you, the url and the request data. $. ajax(url, { "data": requestData, "type": "POST", "timeout": 5000 }) .

What causes an ajax error?

This occurs when jQuery falls into its error callback handler (this callback built into DataTables), which will typically occur when the server responds with anything other than a 2xx HTTP status code.


2 Answers

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"} 
like image 189
Salman A Avatar answered Oct 15 '22 09:10

Salman A


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 }); 
like image 32
Philippe Genois Avatar answered Oct 15 '22 09:10

Philippe Genois