Ajax debugging steps under jQuery and jqueryajax debugging
The following figure shows the Ajax debugging steps under jQuery.
In the process of using Ajax, the most comfortable thing is one step of success. The biggest headache is that it is not successful, but you do not know where to view the error, and then what is the problem after seeing the error, so let's talk about Ajax debugging today:
First, let's talk about the project requirements: Tools/materials, jQuery. js, editor, Chrome browser, and wamp.
For detailed implementation methods and steps, see the following:
Step 1: Create ajax.html and ajax. php in the same directory
Step 2: Compile ajax.html. Make sure to modify the file encoding to UTF-8. The Code is as follows:
<!DOCTYPE html>
In the wamp environment, the browser runs
Step 3: Compile the ajax. php file. Make sure to change the file encoding to UTF-8. The Code is as follows:
<?php echo "Ajax Test";Run in the Web browser in the wamp Environment
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 ", // request page address type: 'post', // request data method get post dataType: 'text', // data return method text html json success: function (data) {// after the request, the response is successfully executed after alert (data) ;}, error: function () {// after the request, failed response or an error occurred while executing alert ("exception! ") ;}}) ;}</Script>Ajax.html code structure
Step 5: In the wampenvironment, run ajax.html and click the Ajax Test button. A dialog box is displayed, indicating that it is normal. If no result is displayed, refer to the troubleshooting method below.
Step 6: If you see this, it indicates that an error has occurred. After that, let's talk about the troubleshooting method:
First, right-click the blank area of the browser --> review the elements, and then check whether there are any red 'X' numbers shown in 2. If yes, the js syntax is incorrect. Click the red 'X' number, 2 is located, that is, the name of the error file. After you click it, 3 is located, that is, the location where the syntax error occurs or there is an error in front of the location. If not, refer to 7.
Step 7: Check the Ajax on the Right of Network --> On the basis of Step 7. php --> the information in Headers. If it is 200 OK, it indicates that the file path is correct. If it is another value, you need to determine the php file call path; even if it is 200 OK, you can also view the content under the Preview option, which is the output content of the PHP file: Ajax. for example, the php file outputs Ajax Test, and the Preview displays Ajax Test. If Preview outputs other content 3, there is an error in the PHP file.
Step 8: As mentioned above, there are many error types that cannot be listed one by one. But to sum up the thinking: When an error occurs, first determine the error in the html and php files, which file is the error, and then solve it in the corresponding file.
The code in step 1 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 usage of $. ajax and $. post. $. post is easier to use, but $. ajax is more conducive to a comprehensive understanding.
The above is a detailed description of Ajax debugging steps under jQuery, and I hope to help you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
