lovecoding
/
W250511


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            display: flex;
            flex-wrap: wrap;
        }
        .goods-card {
            width: 234px;
            box-shadow: 0 0 5px gray;
            padding-bottom: 30px;
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .goods-pic img {
            width: 234px;
        }

        .goods-title,
        .goods-info,
        .goods-price {
            padding: 0 10px;
        }

        .goods-title {
            color: #333;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            margin-bottom: 2px;
        }

        .goods-info {
            font-size: 12px;
            color: #b0b0b0;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            margin-bottom: 10px;
        }

        .goods-price {
            text-align: center;
        }

        .goods-price span {
            color: #ff6700;
            font-size: 14px;
            font-weight: 400;
        }

        .goods-price del {
            color: #b0b0b0;
            font-size: 14px;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>

    <script>

        // 第一个步创建XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
        // 第二个步调用open方法配置请求信息
        xhr.open("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList");
        // 第三步发送请求
        xhr.send();
        // 第四步监听响应
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let jsonStr = xhr.responseText;
                // 服务端返回的数据为JSON字符串
                // 把JSON字符串转换为对象
                let obj = JSON.parse(jsonStr);
                console.log(obj.data[0].productDtoList);
                let productDtoList = obj.data[0].productDtoList;
                let htmlStr = ""
                let oBox = document.querySelector(".box");
                productDtoList.forEach(function (val) {
                    htmlStr += `
                        <div class="goods-card">
                            <div class="goods-pic">
                                <img src="${val.pic}" alt="phone">
                            </div>
                            <div class="goods-title">
                                <span>${val.prodName}</span>
                            </div>
                            <div class="goods-info">
                            ${val.brief}
                            </div>
                            <div class="goods-price">
                                <span>${val.price}元起</span>
                                
                            </div>
                        </div>
                    `;
                });
                oBox.innerHTML = htmlStr;

            }
        }
    </script>
</body>

</html>