promise封装Ajax案例淘宝猜你喜欢

最新推荐文章于 2024-07-26 20:46:33 发布

文丁响

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量106

点赞数

文章标签： Promise Ajax 响应式布局 Flex JSON数据

本文链接：https://blog.csdn.net/wdx1641670284/article/details/127892273

版权

显示：

div部分：

<div class="box">
        <div class="like_title">
            <h3>
                <span>
                    猜你喜欢
                </span>
                <img src="https://gw.alicdn.com/imgextra/i2/O1CN016b1mMM1FxJlsXfWhU_!!6000000000553-2-tps-96-30.png"
                    alt="">
            </h3>
        </div>
        <div class="like_list">

        </div>
</div>

css部分：

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f4f4f4;
}
.box {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}
.like_title {
  height: 24px;
  line-height: 24px;
}
.like_title span {
  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  font-size: 24px;
  font-weight: bold;
}
.like_title img {
  height: 20px;
  margin: 4px 0 0 6px;
}
.like_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.like_list .list {
  width: 354px;
  height: 154px;
  padding: 10px;
  border: 1px solid #f9f9f9;
  border-radius: 13px;
  cursor: pointer;
  background-color: #f9f9f9;
  display: flex;
  margin-top: 20px;
}
.like_list .list .img {
  width: 154px;
  height: 154px;
}
.like_list .list .img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.like_list .list .content {
  width: 190px;
  height: 154px;
  margin-left: 10px;
}
.like_list .list .content .title {
  height: 46px;
  line-height: 23px;
  overflow: hidden;
  font-size: 16px;
}
.like_list .list .content .title img {
  height: 16px;
  position: relative;
  top: 2px;
}
.like_list .list .content .title:hover {
  color: #ff5000;
}
.like_list .list .content .label {
  height: 36px;
  margin-top: 5px;
}
.like_list .list .content .label span {
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  padding: 0 4px;
  display: inline-block;
  font-size: 12px;
  color: #ff5000;
  border: 1px solid #ff5000;
  background-color: #fff;
}
.like_list .list .content .price {
  height: 30px;
  line-height: 30px;
  margin-top: 30px;
}
.like_list .list .content .price span {
  color: #ff5000;
}
.like_list .list .content .price span:nth-child(1) {
  font-size: 14px;
}
.like_list .list .content .price span:nth-child(2) {
  font-size: 20px;
}
.like_list .list:hover {
  animation: anmita 1s 1 normal 0s forwards ;
}
@keyframes anmita {
  100% {
    background-color: #fff;
    border: 1px solid #ff5000;
  }
}

JS部分：

1.promise封装Ajax部分：

//写一个函数
function proAjax(url) {
    //定义一个 promise  定义之后会立即执行
    let pro = new Promise((resolved) => {
        //ajax四要素
        //创建
        let ajax = new XMLHttpRequest();
        //打开
        // ajax.open('get', 'index.json');
        ajax.open('get', url);
        //发送
        ajax.send();
        //监听
        ajax.onreadystatechange = function (res) {
            //判断最后一次握手情况
            if (res.currentTarget.readyState == 4 && res.currentTarget.status == 200) {
                //转换成json格式
                let data = JSON.parse(res.currentTarget.responseText);
                resolved(data)
            }
        }
    })
    //使用pro作为proAjax的函数返回值
    return pro;
}
// proAjax('index.json') == pro

2.显示网页js部分：

<script>
        proAjax('db.json').then((result) => {
            //循环result
            for (const key in result) {
                document.querySelector('.like_list').innerHTML += `
                    <div class="list">
                        <div class="img">
                            <img src="${result[key].pict_url}" alt="">
                        </div>
                        <div class="content">
                            <div class="title">
                                ${result[key].atmosphere != undefined ?
                        `<img src="https://gw.alicdn.com/imgextra/i4/O1CN018RrJkI1DlI6Ib6avz_!!6000000000256-2-tps-174-42.png" alt="">` :
                        result[key].isAd == "true" ?
                            `<img src="https://img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png" alt="">` :
                            ''
                    }
                                ${result[key].title}
                            </div>
                            <div class="label">
                                ${result[key].icons == undefined ?
                        '' :
                        `
                                        <span>
                                            ${result[key].icons[0].text}
                                        </span>
                                    `
                    }
                            </div>
                            <div class="price">
                                <span>
                                    ￥
                                </span>
                                <span>${result[key].real_wap_price}</span>
                            </div>
                        </div>
                    </div>
                    `
            }
        })
    </script>