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

最新推荐文章于 2024-09-17 00:54:14 发布

可可鸭~

最新推荐文章于 2024-09-17 00:54:14 发布

阅读量2.7k

点赞数 1

分类专栏： JavaScript学习文章标签： css html javascript css3

本文链接：https://blog.csdn.net/qq_43547255/article/details/121638945

版权

JavaScript学习专栏收录该内容

26 篇文章 4 订阅

订阅专栏

本文通过实例代码介绍了如何使用JavaScript中的AJAX进行数据请求，并结合JSON对象解析数据，实现实时动态加载内容。内容包括样式结构的设计、AJAX封装、以及页面的交互与应用，涉及forEach方法、DOM操作和页面滚动。

摘要由CSDN通过智能技术生成

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>