Ajax debugging steps under jquery are _ajax related

Here is an illustrated way to introduce the Ajax debugging steps under jquery

In the use of Ajax, the most comfortable is a step of success, the most headache is not successful, but do not know where to see the error, and then see where the error after the problem, so today to say the use of Ajax debugging:

First of all, the project requirements: Tools/raw materials, jquery.js, editors, Chrome browser, WAMP build environment

The concrete realization method and the step please see below:

First step: Create Ajax.html and ajax.php in the same directory

The second step: write ajax.html, note that the modified file encoding is UTF-8, the code is as follows:

<! DOCTYPE html>
 
  
 
 

In the WAMP environment, the browser runs as shown:

The third step: write ajax.php file, note that the modified file encoding is UTF-8, the code is as follows:

<?php
  echo "Ajax Test";

In the WAMP environment, use the browser to run as shown:

Step Fourth: Add the following code to the head of ajax.html:

<script type= "Text/javascript" src= "jquery.js" ></script>
<script type= "Text/javascript" >
function Checkajax () {
 $.ajax ({
  URL: "ajax.php",//Requested page address
  type: ' Post ',///Request Data way get post 
  DataType: ' text ',//data returned by way text HTML JSON 
  success:function (data) { 
          //request, Response executed
         alert (data) successfully;  
  error:function () { 
         //request, the response was unsuccessful or there was an error executing
         alert ("Exception!"). ");  
     }
 });
}
</script>

Current ajax.html code structure as shown:

Fifth step: In the WAMP environment, run ajax.html, click on the Ajax Test button, appear as the picture frame, indicating normal; if there is no result, refer to the wrong way behind.

Sixth step: see here, it means that you have errors appear, and then say the wrong way:

First, the browser's blank right mouse button--> review elements, and then see if there is a red ' X ', as shown in Figure 2, if there is a syntax error JS, click Red ' The X ' number will be positioned to 2, that is, the name of the error file, and the click will be positioned to 3, where the grammatical error occurs or there is an error in front of the position; if not, refer to 7

The seventh step: the same in the 6th step based on the network--> to see the right ajax.php-->headers information, if OK, the file path is no problem, if for other values, then you have to determine the PHP file call path , even if you want to check the contents of the preview option, this content is the output of PHP file: Take ajax.php as an example, PHP file output is Ajax test, in the preview display is the AJAX test. If the preview output is something else, as shown in Figure 3, there are errors in the PHP file.

Eighth step: The above said so much, but the type of error there are many styles, can not enumerate. But summed up the idea: errors appear, first to determine the error is HTML and PHP two files, which file out of the wrong, and then to the corresponding file to solve.

The code in step 4th can be abbreviated:

<script type= "Text/javascript" src= "jquery.js" ></script>
<script type= "Text/javascript" >
function Checkajax () {
 $.post (' ajax.php ', function (data) {
   alert (data);
  }, ' text '
 );
}
</script>

Mainly is the use of $.ajax and $.post difference, $.post use simpler, but $.ajax more conducive to a comprehensive grasp of understanding.

The above content is about jquery under the Ajax debugging steps to explain, I hope to help.