用jquery和php实现ajax异步请求响应

ajax技术可以实现异步请求和响应，下面的是用jquery向一个php脚本发送异步请求，并得到响应。

第一步，准备好前台的html表单，和jquery实现的ajax请求

 1 <html lang="zh-cn">
 2     <head>
 3         <meta charset="utf-8">
 4         <title>ajax</title>
 5         <script src="jquery.js"></script>
 6     </head>
 7     <body>
 8         <form>
 9             <input type="text" name="user_name"/>
10             <a href="javascript:">提交</a>
11         </form>
12         <script>
13             $(function(){
14                 $('a').click(function(){
15                     $.ajax(
16                         {
17                             type : 'post',
18                             url : 'test.php',
19                             dataType : 'json',
20                             data : {
21                                 user_name : $('[name="user_name"]').val()
22                             },
23                             success : function(response){
24                                 if(response.res){
25                                     console.log( response.info );
26                                 }else{
27                                     console.log( response.info );
28                                 }
29                             },
30                             error : function(){
31                                 console.log('ajax请求失败！');
32                             }
33                         }
34                     );
35                 });
36             });
37         </script>
38     </body>
39 </html>

 

第二步，准备好响应的php脚本

 1 <?php
 2 if($_POST){
 3     $arr = [
 4         'res' => '',
 5         'info' => ''
 6     ];
 7     $arr['res'] = true;
 8     $arr['info'] = $_POST['user_name'];
 9    echo json_encode($arr);
10 }

第三步，将两个文件，放在服务器里，访问test.html，在表单输入数据，点击，提交，可以在浏览器的控制台中查看到，输出结果，到network，可以查看请求和响应。

 

 

posted on 2019-11-12 20:19  GameCat  阅读(731)  评论(0)  编辑  收藏  举报

导航