AJAX和XML交互

最新推荐文章于 2021-08-05 17:52:42 发布

翻译最新推荐文章于 2021-08-05 17:52:42 发布 · 446 阅读

Jquery 同时被 2 个专栏收录

44 篇文章

订阅专栏

PHP

23 篇文章

订阅专栏

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <style>
        #tit{
            width:200px;
            height: 30px;
            background: red;
        }
        #imgw{
            width:200px;
            height: 200px;
            background: yellow;
        }
        #imgw img{
            width:100%;
            height:100%;
        }
        #bu{
            width:200px;
            height: 30px;
            background:blue;
        }
    </style>
</head>
<body>
<div  id="tit" ></div>
<div id="imgw">
    <img src="" alt="" id="img">
</div>
<div  id="bu"></div>
<br>
<!--按钮-->
    <button name="ll">萝莉</button>
    <button  name="abm">奥巴马</button>
    <button  name="mn">美女</button>

    <script>
        $("button").click(function () {
            var ts = this;
            $.ajax({
                // 1.数据传递方法
                type:"GET",
                //2.去哪个页面获取处理后的xml
                url: "ph.php",

                //如果要使用页面的数据发送到php页面去交互,则使用data
                data:{"name":this.getAttribute("name")},

                //3.获取成功后执行函数,xhr表示获取到的xml文件
                success: function(xhr){
                    var nme = ts.getAttribute("name");
                    var ti = xhr.querySelector(nme).querySelector("title").innerHTML;     //获取到的xml标题内容
                    var imgs = xhr.querySelector(nme).querySelector("image").innerHTML;   //获取到的xml图片内容
                    var buttom = xhr.querySelector(nme).querySelector("age").innerHTML;   //获取到的xml页脚内容

                    document.getElementById("tit").innerHTML = ti;              //设置标题
                    document.getElementById("img").setAttribute("src",imgs);    //设置图片
                    document.getElementById("bu").innerHTML = buttom;           //设置页脚
                },
                //4.获取失败后执行函数
                error:function(xhr){
                    alert("获取失败");
                }
            }
            );
        });
    </script>
</body>
</html>

xml数据页面

<?xml version="1.0" encoding="UTF-8"?>
<person>
   <ll>
       <title>萝莉</title>
       <age>18</age>
       <image>a.jpg</image>
   </ll>
   <abm>
       <title>奥巴马</title>
       <age>30</age>
       <image>b.jpg</image>
   </abm>
   <mn>
       <title>美女</title>
       <age>22</age>
       <image>c.jpg</image>
   </mn>
</person>

php处理页面

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

    //处理xml文件
    echo file_get_contents("info.xml");
?>

处理流程: