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

显示：

div部分：

css部分：

JS部分：

1.promise封装Ajax部分：

2.显示网页js部分：

数据部分：

显示：

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) => {//循环resultfor (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>

数据部分：

可私聊我！！！

promise封装Ajax案例淘宝猜你喜欢相关推荐

弘辽科技：仅仅6招！教你快速入选淘宝猜你喜欢商品池
原标题<弘辽科技:仅仅6招!教你快速入选淘宝猜你喜欢商品池> 现在的淘宝流量已经越来越注重个性化,淘宝猜你喜欢就是一个很不错的流量渠道,很多淘宝商家都想获取更多的猜你喜欢流量.猜你喜欢的流 ...
淘宝猜你喜欢为什么一定要根据最近浏览行为推荐商品?
咖友提问:淘宝猜你喜欢为什么一定要根据最近浏览行为推荐商品? 问题背景: 最受不了淘宝的猜你喜欢功能! 为什么!? 前段时间,我家媳妇用我的淘宝买了一次姨妈巾,您猜怎么着? 我现在每天打开淘宝满眼都是 ...
快速入池淘宝猜你喜欢方法技巧
其实大家都知道在手机淘宝里面的猜你喜欢是一个很好的免费流量入口,很多商家真的是挤破了头都希望自己的商品能够入池,可是多次努力都没有结果,让人十分沮丧,可是很多商家却不知道想要快速入池猜你喜欢,以下这些 ...
【艾特淘】如何才能入池淘宝“猜你喜欢”？
据大数据统计,平均每个月有6.34亿人在淘宝上购物,无数男男女女端着手机一页一页地刷着这个淘宝个性化推荐的板块,希望淘到点好东西.这是一群很难搞定的消费者,心思多变又经常漫无目的.一个刚开启健身生活的 ...
移动端WEB程序，类淘宝猜你喜欢效果
vue开发一个类似于手机淘宝中猜你喜欢的功能组件组件代码: <!--* @Author: your name* @Date: 2020-05-24 16:02:57* @LastEditTim ...
如何进入淘宝猜你喜欢优选池?如何在猜你喜欢中出现自己的宝贝？
用过淘宝的人都知道,在你浏览了某件商品后,等你再次进入淘宝时,页面全是和你上次浏览过的商品类似的商品,这就是淘宝的一个功能猜你喜欢.但是不是所有类似的产品都会被推荐给买家,都会给买家看到,那是要通过什 ...
2023电商运营关于淘宝猜你喜欢玩法
那么在这个大数据推送内容呈现出"千人千面"的情况下,我们要怎样才能出现在我们的潜在客户手机中的"猜你喜欢"这类免费推荐板块里,成为了作为淘宝卖家最关心的事情. ...
EdgeRec - 揭秘边缘计算在淘宝猜你喜欢的大规模应用
1.推荐系统中的痛点在全面进入无线的时代,为了解决信息负载的问题,越来越多的推荐场景得到兴起,尤其是以列表推荐形式为主的信息流推荐.以手淘信息流为例,进入猜你喜欢场景的用户,兴趣常常是不明确的,用户 ...
AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录同源策略和跨域同源策略跨域 JSONP JSONP的实现原理自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...

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

显示：

div部分：

css部分：

JS部分：

1.promise封装Ajax部分：

2.显示网页js部分：

数据部分：

promise封装Ajax案例淘宝猜你喜欢相关推荐

最新文章

热门文章

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

显示：

div部分：

css部分：

JS部分：

1.promise封装Ajax部分：

2.显示网页js部分：

数据部分：

promise封装Ajax案例 淘宝猜你喜欢相关推荐

最新文章

热门文章

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

promise封装Ajax案例淘宝猜你喜欢相关推荐