Ajax练习

本文主要就是博主编写了一个小小的一个案例并且遗留了一个问题首先先来看案例代码如下：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 50px auto;
            text-align: center;
            background: #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="myAjax.js"></script>
    <script>
        window.onload = function (ev) {
            // 1.获取需要设置的元素
            let oTitle = document.querySelector("#title");
            let oDes = document.querySelector("#des");
            let oImg = document.querySelector("img");

            // 2.获取所有按钮
            let oButtonList = document.querySelectorAll("button");

            // 3.给按钮添加点击事件
            oButtonList[0].onclick = function () {
                // 4.发送Ajax请求到服务器
                ajax({
                    type: "get",
                    url: "ajax-test.php",
                    data: {"name": this.getAttribute("name")},
                    timeout: 3000,
                    success: function (xhr) {
                        let res = xhr.responseText.split("|");

                        oTitle.innerHTML = res[0];
                        oDes.innerHTML = res[1];
                        oImg.setAttribute("src", res[2]);
                    },
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });
            }
            oButtonList[1].onclick = function () {

            }
            oButtonList[2].onclick = function () {

            }
        }
    </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-test.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.获取前端传递的参数
$name = $_GET["name"];

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

// 4.将小字典中的内容取出来返回给前端
echo $product["title"];
echo "|";
echo $product["des"];
echo "|";
echo $product["image"];

测试结果：