Home>

The following describes the ajax debugging steps under jquery through a combination of graphics and text.

During the use of ajax,The most comfortable is one step success,The biggest headache is unsuccess.But I don't know where to look for the error,Then see what went wrong after the error,So today about the use of ajax debugging:

Let me tell you about the project requirements:tools/raw materials, jquery.js, editor, chrome browser, wamp build environment

Specific implementation methods and steps please see below:

Step 1:Create ajax.html and ajax.php in the same directory

The second step:write ajax.html, pay attention to modify the file encoding to utf-8, the code is as follows:

<! Doctype html>
<html>
 <head>
  <title>ajax</title>
 </head>
 <body>
  <button onclick="checkajax ()">ajax test</button>
 </body>
</html>
</pre>
</div>
<p>
Under the wamp environment, the browser runs as shown in the figure:
</p>
<p>
The third step:write the ajax.php file, pay attention to modify the file encoding to UTF-8, the code is as follows:
</p>
<div>
<pre>
<?php
  echo "ajax test";

Under the wamp environment, use the browser to run as shown in the figure:

Step 4: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", //The requested page address
  type:"post", //Method of requesting data get post
  datatype:"text", //how the data is returned text html json
  success:function (data) {
          //After the request,Response executed successfully
         alert (data);
     },  error:function () {
         //After the request,Unsuccessful response or execution error
         alert ("Exception!");
     }
 });
}
</script>

The current ajax.html code structure is shown in the figure:

Step 5:In the wamp environment, run ajax.html, click the ajax test button, and a popup box as shown in the figure will appear.Description is normal;If there is no result,Refer to the troubleshooting methods below.

Step 6:See here,It means you have an error,After that, let's talk about the troubleshooting method:

First, right-click in the blank space of the browser->review element,Then see if there is a red "x" as shown in Figure 2. If there is a syntax error in js,Click on the red "x", it will locate to 2, which is the name of the error file,After clicking, it will locate to 3, which is the place where the grammatical error occurs or there is an error in front of this positionIf not,Reference 7

Step 7:Similarly on the basis of Step 6,Look at the information in network->ajax.php->headers on the right,If it is 200 ok, there is no problem with the file path.For other values,Then determine the calling path of the php file;Even if it is 200 ok, check the content under the preview option,This content is the output of the php file:Take ajax.php as an example, the php file outputs ajax test, and the preview shows ajax test. If the preview output is other content as shown in Figure 3, there is an error in the php file.

Step 8:So much is said aboveBut there are many different types of errors,We cannot list them one by one.But to summarize the idea:an error has occurred,First, determine whether the error is two files, html and php.Which file went wrong,Then go to the corresponding file to resolve.

The code in step 4 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>

The main difference is the use of $.ajax and $.post,$.post is simpler to use,But $.ajax is more conducive to comprehensive understanding.

  • Previous PHP executes SQL file and imports SQL file into database
  • Next C # #define conditional compilation