Ajax error debugging Analysis of jQuery and jqueryajax errors

Ajax error debugging Analysis of jQuery and jqueryajax errors

JQuery encapsulates ajax very well. However, in daily development, I still encounter ajax errors occasionally. Here is a brief analysis of ajax errors

The general jQuery usage is as follows. ajax submits the "Tom and rat" data to the xxx. php file through the post method. After the operation is successful, the returned data is printed. If the operation fails, the cause of 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){
    console.log(jqXHR.);
    console.log(textStatus);
    console.log(errorThrown);
    }});

According to the official jQuery documentation, there are three parameters for error in ajax:JqXHR, textStatus, errorThrown.

JqXHR also has four attributes,

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

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

3. statusText: the Error message corresponding to the status code. For example, the Error message 404 is not found, and the Error message 500 is Internal Server Error.

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

TextStatus and errorThrown are both string types, which are returned statuses and server error messages respectively.

Under normal circumstances, ajax enters the error function and prints textStatus and jqXHR. readyState to understand why ajax reports an error. If it is still unclear, print all the parameters.

Here we will summarize the situation of ajax errors and add some special cases later.

Case 1Problem: the front end uses the jQuery framework and ajax to interact with the backend. the backend is php + mysql. Ajax errors are found (ajax adopts the post type, json format, and request data is a Json object), and textStatus is printed as "parsererror", which indicates parsing error.

Processing: this print indicates that ajax has successfully interacted with the backend (server side), the backend responds and returns text information. However, the front-end fails to parse the text after receiving it. At this time, I first need to see the text of the backend response. Two methods are available: Print jqXHR. responseText, and view the jqXHR. responseText in the NetWork of Google Chrome (other browsers can also) F12. At this time, the information we see is 5 {"status": "success "}. It is easy to see that this text contains the data of a json object, but it is not a complete json data. If an error is found, you can directly modify the relevant information in the PHP file to remove unnecessary printing. Solve the problem. In addition, an unqualified json object data may cause this problem. For example, {'status': 'success'} contains single quotation marks.

 

Case 2Problem: the front end uses the jQuery framework, ajax is used to interact with the backend, and then the backend uses nodejs to operate the database. It is found that ajax has no response, does not go into the callback function of success, or the callback function of error.

Processing: First, check whether the function is implemented and find that the backend is actually processed, and the database has completed the modification operation. Then the problem is very clear, and the backend does not respond to the front-end after processing. After the backend processing, add the relevant response code to solve the problem. We can see that ajax error status codes are actually sent by the backend.

 

The above is a summary of the problems encountered during the personal development process. If any errors occur, I hope to correct them. Thank you very much!