Ajax error Debugging analysis in jquery _jquery

The Ajax package is very good in jquery. But in daily development, I occasionally encounter Ajax errors. Here is a simple analysis of the AJAX error

The general jquery usage is as follows: Ajax submits "Tom and mouse" data to the xxx.php file by post. When successful, the returned data is printed, and the reason for the error is 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 the jquery official document, the error in Ajax has three parameters, respectively, Jqxhr,textstatus,errorthrown.

And there are four properties in the JQXHR,

1.readyState: Current state, 0-uninitialized, 1-loading, 2-already loaded, 3-data interacting, 4-complete.

2.status: The returned HTTP status code, such as the common 404,500 error code.

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

4.responseText: Server response to returned text information

Both Textstatus and Errorthrown are string types, which are the returned state and the server error message.

Under normal circumstances, Ajax into the error function, the Textstatus and jqxhr.readystate print out, probably know why Ajax error. If it's still not clear, print out all the parameters.

Here is a summary of the situation encountered by Ajax errors, later encountered new special circumstances to supplement.

Case 1

problem: The front end uses the jquery framework, using AJAX to interact with the backend, and the back end is Php+mysql. Found Ajax error (Ajax using post type, JSON format, request data as JSON object), print Textstatus is "parsererror", meaning parsing errors.

processing: This print shows that Ajax has been successfully interacting with the backend (server-side), back-end response and return of textual information. But the front end accepts the text and parses the error. At this point I need to see the textual information of the backend response first. There are two ways, one is to print Jqxhr.responsetext, the second in Google browser (other browsers can also) F12 under Network view. The information you see here is 5{"status": "Success"}. It's not hard to see that this text contains a JSON object's data, but not a full JSON data. Error found, directly to the PHP file to modify the corresponding information, the extra print removal. Solve the problem. Also, an unqualified JSON object data can cause the problem. For example {' status ': ' Success '} The data is single quotes.

Case 2

problem: The front end uses the jquery framework, uses AJAX to interact with the backend, and then lets the back-end manipulate the database, and the backend is Nodejs. Found Ajax unresponsive, did not go into the success callback function, nor entered the error callback function.

Processing: first check the function is not implemented, found that the backend is actually done processing, the database has been completed related modification operations. The problem is clear, and the backend does not respond to the front end after processing. After processing in the back end with the relevant response code can be resolved, so that Ajax error status code, in fact, are sent over the back end.

The above is the personal development process encountered problems and treatment summary, if there is a wrong place, look forward to correct, extremely grateful!

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!