Ajax小练习-01

最新推荐文章于 2022-10-28 16:01:20 发布

七彩猫猫虫

最新推荐文章于 2022-10-28 16:01:20 发布

阅读量174

点赞数

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

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

版权

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

14 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

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

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[i].onclick=function () {
                        $.ajax({
                        type:"get",
                        url:"test.php",
                        data:{"name":this.getAttribute("name")},//传入key：按钮中的name参数
                        timeout:3000,
                        success:function(xhr){
                                var res=xhr.split("|");
                            oTitle.innerHTML=res[0];
                            oDes.innerHTML=res[1];
                            oImg.setAttribute("src",res[2]);
                        },
                        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
//保存的商品信息
$products=array("nz"=>array("title"=>"A1","des"=>"你好1","image"=>"image/1.jpg"),
               "bb"=>array("title"=>"A2","des"=>"你好2","image"=>"image/2.jpg"),
               "tx"=>array("title"=>"A3","des"=>"你好3","image"=>"image/3.jpg"));
//获取前端传递的参数
$name=$_GET["name"];

//echo $name;

//根据前端传入的key，获取对应的字典
$product =$products[$name];


//将字典中的内容取出来返回给前端
echo $product["title"];
echo"|";  //用竖线隔开，前端html文件中，用splite('|')的方法区分，不建议使用，一般用xml或json
echo $product["des"];
echo"|";
echo $product["image"];

七彩猫猫虫

关注

0
点赞
踩
0

收藏

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

效果图点击按钮切换图片及描述，数据来自后台php文件html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ...
复制链接

扫一扫