案例：蘑菇街跨域请求、下拉加载数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jsonp.js"></script>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap">
<div class="headerContainer">
<img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png">
<div class="catalog">
目录
</div>
<div class="searchContainer">
<input type="text" class="searchInput" />
<button class="btn"></button>
</div>
<div class="iconShow">
<span class="iconMessage"></span>
消息
</div>
<div class="iconShow">
<span class="iconCollect"></span>
收藏
</div>
</div>
<h3 class="sub_title">
全部食品
</h3>
<div class="nav_box">
<div class="txt">
<span>￥</span>
</div>
<span class="divid">-</span>
<div class="txt">
<span>￥</span>
</div>
<a class="confirm_btn" href="javascript:;">确定</a>
</div>
<div class="itemContainer">
<!-- 商品呈现 -->
<!-- <div class="item">
<img
src="https://s11.mogucdn.com/mlcdn/c45406/180830_0ggfhcfd757g3jg8k8fjaclc3h123_640x960.jpg_440x587.v1cAC.40.webp" />
<div class="bottom-describe">
<p class="describe">
海底捞火锅1盒懒人自煮自热方便速食牛油麻辣即食小火锅麻辣火锅
</p>
<div class="priceContainer">
<b>¥26.8</b>
<span class="oldPrice">￥53.6</span>
<span class="mystar">
<img src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
alt="" />
2585
</span>
</div>
</div>
</div> -->
</div>
</div>
</body>
<script>
let page = 1;
getData();
function getData() {
ajax({
url: "https://list.mogu.com/search",
data: {
_version: 8193,
ratio: "3%3A4",
cKey: 15,
page: page,
sort: "pop",
ad: 0,
fcid: 52014,
action: "food"
},
dataType: "jsonp",
jsonp: "callback",
success: function (res) {
if (res.status.code == 1001) {
page++;
let data = res.result.wall.docs;
// console.log(data);
data.forEach(item => {
createEelement(item);
})
}
}
})
}
function createEelement(item) {
console.log(item);
let mydiv = document.createElement("div");
mydiv.classList = "item";
mydiv.innerHTML = `<img
src="${item.img}" />
<div class="bottom-describe">
<p class="describe">
${item.title}
</p>
<div class="priceContainer">
<b>¥${item.price}</b>
<span class="oldPrice">￥${item.orgPrice}</span>
<span class="mystar">
<img src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
alt="" />
${item.cfav}
</span>
</div>
</div>`;
document.querySelector(".itemContainer").appendChild(mydiv);
}
//下拉加载数据；
document.onscroll = function(){
let windowHeight = document.documentElement.clientHeight;
let contentHeight = document.documentElement.offsetHeight;
let scrollHeight = contentHeight - windowHeight;
let scrollTop = document.documentElement.scrollTop;
if(scrollTop>=(scrollHeight-10)){
getData();
}
}
</script>
</html>
