JavaScript-初识ajax、ajax封装、及json对象使用(下)
一、内涵段子样式与结构
第一步：
运用之前学的内容写好要循环生成的样式与结构
效果图：
第二步：
引入JavaScript-初识ajax、ajax封装、及json对象使用(上)封装的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=375, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
width: 100%;
height: 150px;
background-color: rgb(233, 104, 125);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top {
width: 100%;
flex: 2;
background-color: #87ceeb;
display: flex;
align-items: center;
justify-content: center;
}
.commentsimg {
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: 50px auto;
background-position: center center;
background-color: rgb(255, 62, 62);
margin-left: 20px;
}
.commentsname {
width: 100%;
font-size: 10px;
font-family: "宋体";
line-height: 10px;
text-align: center;
padding-top: 5px;
}
.left {
flex: 1;
}
.right {
flex: 3;
display: flex;
flex-direction: column;
}
.bottom {
width: 100%;
flex: 1;
background-color: rgba(186, 243, 210, 0.952);
display: flex;
flex-direction: column;
padding-left: 5px;
}
.downcount {
flex: 1;
font-size: 8px;
font-family: "宋体";
line-height: 8px;
margin-top: 10px;
}
.text {
font-family: "微软雅黑";
font-size: 15px;
}
.video {
width: 100%;
margin-top: 10px;
flex: 1;
font-size: 8px;
}
.download {
width: 100%;
background: #efefef;
text-align: center;
height: 25px;
}
</style>
<body>
<div class="main">
<div class="content">
<div class="top">
<div class="left">
<div class="commentsimg" style="background-image: url()"></div>
<div class="commentsname">用户名：</div>
</div>
<div class="right">
<div class="text">标题：</div>
</div>
</div>
<div class="bottom">
<div class="video">video</div>
<div class="downcount">下载次数</div>
</div>
</div>
</div>
<div class="download">刷新页面</div>
<script src="../js文件/postajax.js"></script>
<script>
var url =
"https://api.apiopen.top/getJoke?page=1&count=7&type%20video";
getAjax(url, function(xhr) {
var dataobj = JSON.parse(xhr.response);
var videoList = dataobj.result;
console.log(videoList);
});
</script>
</body>
</html>
输出查看效果：
二、交互与应用
知识点
1.JavaScript-中forEach()用法
2.封装DOM元素为jQuery对象${变量名}传递参数
3.scrollTo(0,0);滚动到x,y坐标都为0的位置
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=375, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
width: 100%;
height: 150px;
background-color: rgb(233, 104, 125);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top {
width: 100%;
flex: 2;
background-color: #87ceeb;
display: flex;
align-items: center;
justify-content: center;
}
.commentsimg {
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: 50px auto;
background-position: center center;
background-color: rgb(255, 62, 62);
margin-left: 20px;
}
.commentsname {
width: 100%;
font-size: 10px;
font-family: "宋体";
line-height: 10px;
text-align: center;
padding-top: 5px;
}
.left {
flex: 1;
}
.right {
flex: 3;
display: flex;
flex-direction: column;
}
.bottom {
width: 100%;
flex: 1;
background-color: rgba(186, 243, 210, 0.952);
display: flex;
flex-direction: column;
padding-left: 5px;
}
.downcount {
flex: 1;
font-size: 8px;
font-family: "宋体";
line-height: 8px;
margin-top: 10px;
}
.text {
font-family: "微软雅黑";
font-size: 15px;
}
.video {
width: 100%;
margin-top: 10px;
flex: 1;
font-size: 8px;
}
.download {
width: 100%;
background: #efefef;
text-align: center;
height: 25px;
}
</style>
<body>
<div class="main">
</div>
<div class="download">刷新页面</div>
<script src="../js文件/postajax.js"></script>
<script>
var pageof = 1;
var url =
"https://api.apiopen.top/getJoke?page=" +
pageof +
"&count=7&type%20video";
var main = document.querySelector(".main");
var downloadDom = document.querySelector(".download");
getAjax(url, function(xhr) {
var dataobj = JSON.parse(xhr.response);
var videoList = dataobj.result;
console.log(videoList);
renderList(videoList);
});
function renderList(videoList) {
videoList.forEach(function(item, index) {
var content = document.createElement("div");
content.className = "content";
content.innerHTML = `
<div class="top">
<div class="left">
<div class="commentsimg" style="background-image: url(${item.top_comments_header})"></div>
<div class="commentsname">${item.name}</div>
</div>
<div class="right">
<div class="text">标题：${item.text}</div>
</div>
</div>
<div class="bottom">
<div class="video">video地址:${item.video}</div>
<div class="downcount">下载次数:${item.down}</div>
</div>
`;
main.appendChild(content);
});
}
downloadDom.onclick = function() {
pageof++;
var url =
"https://api.apiopen.top/getJoke?page=" +
pageof +
"&count=7&type%20video";
getAjax(url, function(xhr) {
var dataobj = JSON.parse(xhr.response);
main.innerHTML = "";
var videoList = dataobj.result;
renderList(videoList);
scrollTo(0,0);
});
};
</script>
</body>
</html>