Ajax与JSON，XML，PHP

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         *{

             padding:0;

             margin: 0;

         }

         div{

             width: 300px;

             height: 300px;

             border: 1px solid black;

             margin: 50px auto;

             text-align: center;

             background: #e6e6e6;

         }

         img{

             width: 200px;

             height: 200px;

             display: block;

             margin: 10px auto 10px;

             border: 1px solid black;

         }

         p{

             text-align: center;

             background-color:#fff;

         }

     </style>

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

     <script>

         window.onload = function (ev) {

             var oTitle = document.querySelector("#title");

             var oDes = document.querySelector("#des");

             var oImg = document.querySelector("img");

             var oBtns = document.querySelectorAll("button");

             oBtns[0].onclick = function () {

                 var self = this;

                 ajax({

                     type:"get",

                     url:"ajax-test1.php",

                     data:{

                         "name":this.getAttribute("name")

                     },

                     timeout:5000,

                     success:function (xhr) {

                         /*向ajax后台的程序发送xmlhttp请求的时候, 后台程序接到请求会进行处理,处理结束后,可以返回一串数据给前台,

                          这个就是responseText.

                         */

                         var res = xhr.responseText.split("|");

                         oTitle.innerHTML = res[0];

                         oDes.innerHTML = res[1];

                         oImg.setAttribute("src",res[2]);

                     },

                     error:function (xhr) {

                         alert(xhr.status);

                     }

                 });

             }

             oBtns[1].onclick = function () {

                 var self = this;

                 ajax({

                     type: "get",

                     url: "ajax-test2.php",

                     data: {

                         "name": this.getAttribute("name")

                     },

                     timeout: 5000,

                     success: function (xhr) {

                         var name = self.getAttribute("name");

                         var res = xhr.responseXML;

                         var title = res.querySelector(name + ">title").innerHTML;

                         var des = res.querySelector(name + ">des").innerHTML;

                         var image = res.querySelector(name + ">image").innerHTML;

                         oTitle.innerHTML = title;

                         oDes.innerHTML = des;

                         oImg.setAttribute("src", image);},

                         error:function (xhr) {

                             alert(xhr.status);

                         }

                     });

                 }

             oBtns[2].onclick = function () {

                 var self = this;

                 ajax({

                     type:"get",

                     url:"ajax-test3.php",

                     data:{

                         "name":this.getAttribute("name")

                     },

                     timeout:5000,

                     success:function (xhr) {

                         var str = xhr.responseText;

                         var obj = JSON.parse(str);

                         var name = obj.tx;

                         oTitle.innerHTML = name.title;

                         oDes.innerHTML = name.des;

                         oImg.setAttribute("src",name.image);

                     },

                     error:function (xhr) {

                         alert(xhr.status);

                     }

                 });

             };

         }

     </script>

 </head>

 <body>

 <div>

         <p id="title">拜仁球星</p>

         <img src="" alt="">

         <p id="des">球星介绍</p>

         <button name="nz">莱万</button>

         <button name="bb">基米西</button>

         <button name="tx">罗本</button></div>

 </body>

 </html>

ajax-test1.php

 <?php

 //1.定义字典保存商品信息

 $products = array("nz"=>array("title"=>"莱万","des"=>"最佳射手","image"=>"../images/1.jpg"),

                  "bb"=>array("title"=>"基米西","des"=>"鸡哥最可爱","image"=>"../images/2.jpg"),

                  "tx"=>array("title"=>"罗本","des"=>"小飞侠","image"=>"../images/3.jpg"));

 //2.获取前端传递的参数$_GET

 $name = $_GET["name"];

 //echo $name;

 //3.根据前端传入的key,获取对应的字典

 $product = $products[$name];

 //print_r($product);

 //4.将内容取出来，返回给前端

 echo $product["title"];

 echo "|";

 echo $product["des"];

 echo "|";

 echo $product["image"];

ajax-test2.php

 <?php

 //执行结果中有中文，必须在PHP文件顶部设置

 header("content-type:text/html;charset=utf-8");

 //如果PHP中需要返回XML数据，也必须在PHP文件顶部设置

 header("content-type:text/xml;charset=utf-8");

 echo file_get_contents("ajax-test.xml");

 ?>

ajax-test.xml

 <?xml version="1.0" encoding="UTF-8" ?>

 <products>

     <nz>

         <title>莱万</title>

         <des>最佳射手</des>

         <image>../images/1.jpg</image>

     </nz>

     <bb><title>基米西</title>

         <des>可爱</des>

         <image>../images/2.jpg</image></bb>

     <tx><title>罗本</title>

         <des>小飞侠</des>

         <image>../images/3.jpg</image></tx>

 </products>

ajax-test3.php

<?php echo file_get_contents("ajax-test.txt"); ?>

ajax-test.txt

{

    "nz":{

    "title":"莱万",

    "des":"最佳射手",

    "image":"../images/1.jpg"},

    "bb":{"title":"基米西",

          "des":"可爱",

          "image":"../images/2.jpg"},

    "tx":{"title":"阿尔杨-罗本",

             "des":"小飞侠",

             "image":"../images/3.jpg"}

}

巴特西

Ajax与JSON，XML，PHP

最新文章

热门文章