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

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

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

 <html lang="zh-cn">

     <head>

         <meta charset="utf-8">

         <title>ajax</title>

         <script src="jquery.js"></script>

     </head>

     <body>

         <form>

             <input type="text" name="user_name"/>

             <a href="javascript:">提交</a>

         </form>

         <script>

             $(function(){

                 $('a').click(function(){

                     $.ajax(

                         {

                             type : 'post',

                             url : 'test.php',

                             dataType : 'json',

                             data : {

                                 user_name : $('[name="user_name"]').val()

                             },

                             success : function(response){

                                 if(response.res){

                                     console.log( response.info );

                                 }else{

                                     console.log( response.info );

                                 }

                             },

                             error : function(){

                                 console.log('ajax请求失败！');

                             }

                         }

                     );

                 });

             });

         </script>

     </body>

 </html>

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

 <?php

 if($_POST){

     $arr = [

         'res' => '',

         'info' => ''

     ];

     $arr['res'] = true;

     $arr['info'] = $_POST['user_name'];

    echo json_encode($arr);

 }

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

巴特西

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

最新文章

热门文章