Ajax小练习-02-xml

最新推荐文章于 2022-08-15 16:55:20 发布

七彩猫猫虫

最新推荐文章于 2022-08-15 16:55:20 发布

阅读量164

点赞数

分类专栏：自己动手丰衣足食

本文链接：https://blog.csdn.net/SDAW_1/article/details/104240656

版权

自己动手丰衣足食专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

点击按钮切换图片及描述，数据来自后台php文件

xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<person>
        <nz>
            <title>A1</title>
            <des>你好1</des>
            <image>image/1.jpg</image>
        </nz>
        <bb>
            <title>A2</title>
            <des>你好2</des>
            <image>image/2.jpg</image>
        </bb>
        <tx>
            <title>A3</title>
            <des>你好3</des>
            <image>image/3.jpg</image>
        </tx>
</person>

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            width:300px;
            height:300px;
            border:1px solid #000;
            margin:50px auto;
            text-align: center;
            backrground:#ccc;
        }
        img{
            width:200px;
            height: 200px;
            display:block;
            margin:10px auto 10px;
            border:1px solid #000;
        }
        p{
            text-align: center;
            background:pink;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script type="text/javascript">
            window.onload=function () {
                var oTitle=document.querySelector("#title");
                var oDes=document.querySelector("#des");
                var oImg=document.querySelector("img");

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

                for(var i=0;i<oBtns.length;i++) {
                    oBtns[0].onclick = function () {
                        var self = this;  //固定this的指向（btn按钮中的内容）
                        $.ajax({
                            type: "get",
                            url: "test1.php",
                            data: {"name": this.getAttribute("name")},//传入key：按钮中的name参数
                            timeout: 3000,
                            success: function (xhr) {
                                var name = self.getAttribute("name");
                                var res = xhr;
                                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);
                            }
                        });
                    }
                }
            }

    </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>

php文件

<?php
header("content-type:text/xml;charset=utf-8");//执行结果有中文，必须在php文件顶部设置次条

echo file_get_contents("test1.xml");//在php文件中获取本地的xml文件，再把获取到的xml返回给前端

七彩猫猫虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax小练习-02-xml

效果图点击按钮切换图片及描述，数据来自后台php文件xml文件<?xml version="1.0" encoding="UTF-8" ?><person> <nz> <title>A1</title> <des>你好1</des> ...
复制链接

扫一扫

专栏目录