JavaScript-初识ajax、ajax封装、及json简单实战案例(下)_可可

网络 02-07 4622

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>