zoukankan      html  css  js  c++  java

  • Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get、post方式提交和请求数据

    知识要点：

       
   $('#userName').blur(function () {
       var txt = $(this).val();
       $.ajax({
           type:'GET', // 默认是get
           url:'01_JQ_AJAX_get.php',
           data:{
               userName : txt
           },
           success : function (res) {
               $('#tips').html(res);
           },
           error:function (res) {
               $('#tips').html(res.statusText);
               console.log('error',res);
           }  ,
           // 完成时候的回调函数,不管成功还是失败都会执行的回调函数
           complete:function (res) {
               console.log('complete',res);
           }
       });
   });


 $('#userName').blur(function () {
//        $.get("01_JQ_AJAX_step.php",function (res) {
//            $("#tips").html( res );
//        });
//        var txt = $(this).val();
//        $.post("03_JQ_AJAX_post.php",{ userName:txt },function (res) {
//            $("#tips").html( res );
//        });
    });

    1.GET方式请求提交数据

    客户端: JQ_AJAX_get.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .tips{
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13 <form action="01_register.php" method="get">
14     <p class="tips" id="tips"></p>
15     用户名<input type="text" name="userName" id="userName"/>
16     密码<input type="password" name="userPwd" id="userPwd"/>
17     <input type="submit" value="登录">
18 </form>
19 </body>
20 </html>
21 <script src="lib/jquery-1.12.2.js"></script>
22 <script>
23    $('#userName').blur(function () {
24        /**
25         *  $.ajax({});
26         *    url 服务器地址
27         * */
28        var txt = $(this).val();
29        $.ajax({
30            type:'GET', 
31            url:'JQ_AJAX_get.php',
32            data:{
33                userName : txt
34            },
35            success : function (res) {
36                $('#tips').html(res);
37            }
38        });
39    });
40 </script>

    服务器: JQ_AJAX.php

     1 <?php
 2 /**
 3  * Created by qinpeizhou.
 4  * Date: 2017/11/10
 5  * Time: 15:03
 6  * Email : 1031219129@qq.com
 7  */
 8  header('Content-Type:text/html;charset=utf-8;');
 9 // echo 'Success，你成功的从PHP服务器拿到了数据';
10 $uName = $_GET['userName'];
11 $users = ["jack",'rose','tom'];
12 $isExist = in_array($uName,$users);
13 if($isExist) {
14    echo "该帐号已注册，换一个试试";
15 }else{
16    echo "你可以注册";
17 }

    2.POST方式请求提交数据

    客户端： JQ_AJAX_post.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .tips{
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13 <form action="01_register.php" method="get">
14     <p class="tips" id="tips"></p>
15     用户名<input type="text" name="userName" id="userName"/>
16     密码<input type="password" name="userPwd" id="userPwd"/>
17     <input type="submit" value="登录">
18 </form>
19 </body>
20 </html>
21 <script src="lib/jquery-1.12.2.js"></script>
22 <script>
23    $('#userName').blur(function () {
24        /**
25         *  $.ajax({});
26         *    url 服务器地址
27         *    type: 请求类型
28         * */
29        var txt = $(this).val();
30        $.ajax({
31            type:'POST',
32            url:'JQ_AJAX_post.php',
33            data:{
34                userName : txt
35            },
36            success : function (res) {
37                $('#tips').html(res);
38            }
39        });
40    });
41 </script>

    服务器端:JQ_AJAX_post

     1 <?php
 2 /**
 3  * Created by qinpeizhou.
 4  * Date: 2017/11/10
 5  * Time: 15:03
 6  * Email : 1031219129@qq.com
 7  */
 8  header('Content-Type:text/html;charset=utf-8;');
 9 // echo 'Success，你成功的从PHP服务器拿到了数据';
10 $uName = $_POST['userName'];
11 $users = ["jack",'rose','tom'];
12 $isExist = in_array($uName,$users);
13 if($isExist) {
14    echo "该帐号已注册，换一个试试";
15 }else{
16    echo "你可以注册";
17 }

    二.JQuery+Ajax解析Json、XML数据

     1.解析Json数据：

    nav.json

     1 [
 2   {
 3     "link":"http://www.jd.com",
 4     "src":"images/nav_1.png",
 5     "text":"京东超市"
 6   },
 7   {
 8     "link":"http://www.taobao.com",
 9     "src":"images/nav_2.png",
10     "text":"全球购"
11   },
12   {
13     "link":"http://www.mi.com",
14     "src":"images/nav_3.png",
15     "text":"服装城"
16   },
17   {
18     "link":"http://www.163.com",
19     "src":"images/nav_4.png",
20     "text":"京东生鲜"
21   }
22 
23 ]

    客户端：nav_json.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10           list-style: none;
11       }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17              200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26    <button id="btn">无刷新请求</button>
27 <div class="nav">
28     <ul id="navIn">
29  
30     </ul>
31 </div>
32 </body>
33 </html>
34 <script src="lib/jquery-1.12.2.js"></script>
35 <script>
36 
37     /**
38      *  $.ajax({});
39      *    url 服务器地址
40      *    dataType:
41      *    type: 请求类型
42      *    success :function(){
43      *      请求成功点后执行的函数
44      *     }
45      * */
46  $('#btn').click(function () {
47      $.ajax({
48          url:'nav_json.php',
49          dataType:'json',
50          success:function (res) {
51              console.log(res);
52              var htmlStr = '';
53              $.each(res,function (index,item) {
54                    htmlStr +=  " <li>" +
55                        "<a href="+item.link+">" +
56                        "<img src="+item.src+" alt=''> " +
57                        "<p>"+item.text+"</p>" +
58                        "</a><" +
59                        "/li>"
60              });
61              $('.nav ul').html(htmlStr);
62          }
63      });
64  });
65    
66 </script>

    服务端:nav_json.php

     1 <?php
 2 /**
 3  * Created by qinpeizhou.
 4  * Date: 2017/11/10
 5  * Time: 16:52
 6  * Email : 1031219129@qq.com
 7  */
 8 header('Content-Type:text/html;charset=utf-8;');
 9 $jsonStr = file_get_contents('nav.json');
10 echo $jsonStr;

    2.解析XML数据：

    nav.xml

     1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <array>
 3     <item>
 4         <link>http://www.jd.com</link>
 5         <src>images/nav_1.png</src>
 6         <text>京东超市</text>
 7     </item>
 8     <item>
 9         <link>http://www.taobao.com</link>
10         <src>images/nav_2.png</src>
11         <text>全球购</text>
12     </item>
13     <item>
14         <link>http://www.mi.com</link>
15         <src>images/nav_3.png</src>
16         <text>服装城</text>
17     </item>
18     <item>
19         <link>http://www.163.com</link>
20         <src>images/nav_4.png</src>
21         <text>京东生鲜</text>
22     </item>
23 </array>

    客户端：nav_XML.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10           list-style: none;
11       }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17              200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26    <button id="btn">无刷新请求</button>
27 <div class="nav">
28     <ul id="navIn">
29  
30     </ul>
31 </div>
32 </body>
33 </html>
34 <script src="lib/jquery-1.12.2.js"></script>
35 <script>
36 
37     /**
38      *  $.ajax({});
39      *    url 服务器地址
40      *    dataType:
41      *    type: 请求类型
42      *    success :function(){
43      *      请求成功点后执行的函数
44      *     }
45      * */
46  $('#btn').click(function () {
47      $.ajax({
48          url:'nav_XML.php',
49          dataType:'xml',
50          success:function (res) {
51              console.log(res);
52              var item = res.children[0].children;
53              var htmlStr = '';
54              for (var i = 0; i < item.length; i++) {
55                  htmlStr += '<li>
' +
56                      '    <a href="'+$(item[i]).find('link').text()+'">
' +
57                      '        <img src="'+$(item[i]).find('src').text()+'" alt="">
' +
58                      '        <p>'+$(item[i]).find('text').text()+'</p>
' +
59                      '    </a>
' +
60                      '</li>';
61              }
62              $('.nav ul').html(htmlStr);
63          }
64      });
65  });
66    
67 </script>
    服务端：nav_XML.php
     1 <?php
 2 /**
 3  * Created by qinpeizhou.
 4  * Date: 2017/11/10
 5  * Time: 16:52
 6  * Email : 1031219129@qq.com
 7  */
 8 header('Content-Type:text/html;charset=utf-8;');
 9 $jsonStr = file_get_contents('nav.xml');
10 echo $jsonStr;

    三.jQuery+Ajax 加载页面

    1.加载没有js生成Dom元素节点的页面：

    被加载页面 没带js加载数据的： HTML_page_nojs.html

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12         .nav {
13             border: 1px solid #ddd;
14             overflow: hidden;
15         }
16         .nav li{
17             float: left;
18              100px;
19             text-align: center;
20         }
21         .nav li a{
22             text-decoration: none;
23         }
24     </style>
25 </head>
26 <body>
27 <button>无刷新请求</button>
28 <div class="nav">
29     <ul>
30         <li>
31             <a href="chaoshi.html">
32                 <img src="images/nav_1.png" alt="">
33                 <p>京东超市</p>
34             </a>
35         </li>
36         <li>
37             <a href="chaoshi.html">
38                 <img src="images/nav_2.png" alt="">
39                 <p>京东超市</p>
40             </a>
41         </li>
42         <li>
43             <a href="chaoshi.html">
44                 <img src="images/nav_3.png" alt="">
45                 <p>京东超市</p>
46             </a>
47         </li>
48         <li>
49             <a href="chaoshi.html">
50                 <img src="images/nav_4.png" alt="">
51                 <p>京东超市</p>
52             </a>
53         </li>
54     </ul>
55 </div>
56 </body>
57 </html>
58 <script>
59 
60 
61 
62 </script>

    加载方式： load.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10           list-style: none;
11       }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17              200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26    <button id="btn">无刷新请求</button>
27 <div class="nav">
28  
29 </div>
30 </body>
31 </html>
32 <script src="lib/jquery-1.12.2.js"></script>
33 <script>
34 
35     /**
36      *  $.ajax({});
37      *    url 服务器地址
38      *    dataType:
39      *    type: 请求类型
40      *    success :function(){
41      *      请求成功点后执行的函数
42      *     }
43      * */
44  $('#btn').click(function () {
45       $('.nav').load('HTML_page_nojs.html .nav ul');
46 //      $(实例JQ对象).load('要加载的页面  页面的某个模块');
47  });
48    
49 </script>

    2.加载有js生成Dom元素节点的页面：

    被加载的页面：HTML_page.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10           list-style: none;
11       }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17              200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26    <button id="btn">无刷新请求</button>
27 <div class="nav">
28     <ul id="navIn">
29  
30     </ul>
31 </div>
32 </body>
33 </html>
34 <script src="lib/jquery-1.12.2.js"></script>
35 <script>
36 
37     /**
38      *  $.ajax({});
39      *    url 服务器地址
40      *    dataType:
41      *    type: 请求类型
42      *    success :function(){
43      *      请求成功点后执行的函数
44      *     }
45      * */
46 // $('#btn').click(function () {
47      $.ajax({
48          url:'nav_json.php',
49          dataType:'json',
50          success:function (res) {
51              console.log(res);
52              var htmlStr = '';
53              $.each(res,function (index,item) {
54                    htmlStr +=  " <li>" +
55                        "<a href="+item.link+">" +
56                        "<img src="+item.src+" alt=''> " +
57                        "<p>"+item.text+"</p>" +
58                        "</a><" +
59                        "/li>"
60              });
61              $('.nav ul').html(htmlStr);
62          }
63      });
64 // });
65    
66 </script>

    load.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10           list-style: none;
11       }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17              200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26    <button id="btn">无刷新请求</button>
27 <div class="nav">
28  
29 </div>
30 </body>
31 </html>
32 <script src="lib/jquery-1.12.2.js"></script>
33 <script>
34 
35     /**
36      *  $.ajax({});
37      *    url 服务器地址
38      *    dataType:
39      *    type: 请求类型
40      *    success :function(){
41      *      请求成功点后执行的函数
42      *     }
43      * */
44  $('#btn').click(function () {
45 //      $('.nav').load('07_HTML_page.html');
46      47 //      $(实例JQ对象).load('要加载的页面');
48  });
49    
50 </script>
  • 相关阅读:
    2021.10 好运气
    2021.9 抢购
    2021.8 全周期工程师
    2021.7 创业者
    2021.6 过年
    jenkins学习17
    httprunner 3.x学习18
    httprunner 3.x学习17
    python笔记57-@property源码解读与使用
    httprunner 3.x学习16
  • 原文地址：https://www.cnblogs.com/mrszhou/p/7820017.html
Copyright © 2011-2022 走看看