Ajax error debugging analysis in jQuery

jQuery encapsulates ajax very well. But in daily development, I still occasionally encounter ajax errors. Here is a brief analysis of the ajax error

The general usage of jQuery is as follows. Ajax submits the "Tom and Jerry" data to the xxx.php file through post. If successful, the returned data will be printed; if failed, the error reason will be printed.

$.ajax({
 url:"xxx.php",
 type:"post",
 datatype:"json",
 data:{"cat":"tom","mouse":"jack"},
 success:function(data){
 console.log(data);
 },
 error:function(jqXHR,textStatus,errorThrown){<br> console.log(jqXHR.);<br> console.log(textStatus);<br> console.log(errorThrown);<br> }
});

According to jQuery official documentation, error in ajax has three parameters, namely jqXHR, textStatus, and errorThrown.

There are also four attributes in jqXHR,

1.readyState: current state, 0-not initialized, 1-loading, 2-already loaded, 3-data interaction, 4-completed.

2.status: Returned HTTP status code, such as common 404, 500 and other error codes.

3.statusText: Error message corresponding to the status code, such as 404 error message is not found, 500 is Internal Server Error.

4.responseText: The text information returned by the server response

textStatus and errorThrown are both string types, which are the returned status and the server's error information respectively.

Under normal circumstances, ajax goes into the error function and prints textStatus and jqXHR.readyState. You will probably know why ajax reports an error. If it's still unclear, print out all parameters.

Here is a summary of the situations encountered when ajax errors occur, and we will add more when encountering new special situations in the future.

Case 1

Problem: The front-end uses the jQuery framework, and ajax is used to interact with the back-end. The back-end is php+mysql. It was found that an ajax error was reported (ajax uses post type, json format, and the request data is a Json object). The printed textStatus is "parsererror", which means parsing error.

Processing: This print shows that ajax has successfully interacted with the backend (server side), and the backend responded and returned text information. But the front end received an error in parsing the text. At this time, I first need to see the text information of the backend response. There are two ways, one is to print jqXHR.responseText, and the second is to view it in NetWork under F12 in Google Chrome (other browsers are also available). The information seen at this time is 5{"status": "success"}. It is not difficult to see that this text contains the data of a json object, but it is not a complete json data. When the error is discovered, go directly to the php file to modify the corresponding information and remove the redundant printing. Solve the problem. In addition, an unqualified json object data can also cause this problem. For example, {'status':'success'} data contains single quotes.

Case 2

Problem: The front-end uses the jQuery framework, uses ajax to interact with the back-end, and then lets the back-end operate the database, and the back-end is nodejs. It was found that ajax was unresponsive, there was no success callback function, and there was no error callback function.

Processing: First check whether the function has been implemented and found that the backend has actually done the processing and the database has completed relevant modification operations. The problem is very clear. The backend did not respond to the frontend after processing. It can be solved by adding the relevant response code after the back-end processing is completed. It can be seen that the ajax error status code is actually sent by the back-end.

The above is a summary of the problems encountered during personal development and their solutions. If there is anything wrong, please correct me. I am very grateful!