Ajax小练习-03-json

最新推荐文章于 2023-10-13 19:38:09 发布

七彩猫猫虫

最新推荐文章于 2023-10-13 19:38:09 发布

阅读量141

点赞数

分类专栏：学习中的小问题

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

版权

学习中的小问题专栏收录该内容

26 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

json.txt文件

{
"nz":{
            "title":"A1",
            "des":"你好1",
            "image":"image/1.jpg"
},
"bb":{
            "title":"A2",
            "des":"你好2",
            "image":"image/2.jpg"
},
"tx":{
            "title":"A3",
            "des":"你好3",
            "image":"image/3.jpg"
}
}

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;
                        $.ajax({
                            type: "get",
                            url: "test2.php",
                            data: {"name": this.getAttribute("name")},//传入key：按钮中的name参数
                            timeout: 3000,
                            success: function (xhr) {
                                var name = self.getAttribute("name");
                                var str = xhr;
                                var obj = JSON.parse(str);
                                var subObj = obj[name];
                                oTitle.innerHTML = subObj.title;
                                oDes.innerHTML = subObj.des;
                                oImg.setAttribute("src", subObj.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
 echo file_get_contents("test2.txt");

七彩猫猫虫

关注

0
点赞
踩
0

收藏

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

效果图json.txt文件{"nz":{ "title":"A1", "des":"你好1", "image":"image/1.jpg"},"bb":{ "title":"A2", "des":"你好2", "image":"image/2....
复制链接

扫一扫