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

JavaScript-初识ajax、ajax封装、及json对象使用(下)

JavaScript-初识ajax、ajax封装、及json简单实战案例(下)_第1张图片
一、内涵段子样式与结构

第一步:
运用之前学的内容写好要循环生成的样式与结构

效果图:
JavaScript-初识ajax、ajax封装、及json简单实战案例(下)_第2张图片
第二步:
引入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>Documenttitle>
  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">videodiv>
          <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>

输出查看效果:
JavaScript-初识ajax、ajax封装、及json简单实战案例(下)_第3张图片
JavaScript-初识ajax、ajax封装、及json简单实战案例(下)_第4张图片

二、交互与应用

知识点
1.JavaScript-中forEach()用法
2.封装DOM元素为jQuery对象${变量名}传递参数
3.scrollTo(0,0);滚动到x,y坐标都为0的位置

效果图:
JavaScript-初识ajax、ajax封装、及json简单实战案例(下)_第5张图片

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>Documenttitle>
  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 = `
          
${ item.top_comments_header})">
${ item.name}
标题:${ item.text}
video地址:${ item.video}
下载次数:${ item.down}
`
; 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>

你可能感兴趣的:(JavaScript学习,css,html,javascript,css3)