AJAX编程第三天案例：新闻列表

最新推荐文章于 2022-08-01 16:56:32 发布

库库好困

最新推荐文章于 2022-08-01 16:56:32 发布

阅读量787

点赞数 2

CC 4.0 BY-SA版权

分类专栏：八：AJAX编程（看视频）文章标签： ajax

本文链接：https://blog.csdn.net/m0_46597922/article/details/106237605

八：AJAX编程（看视频）专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了如何利用AJAX实现新闻列表的获取和展示，包括获取新闻数据的步骤、定义模板、编译模板、创建时间过滤器和补零函数。还提供了新闻列表接口的请求根路径和调用方式。

案例-新闻列表

在这里插入图片描述

1. 实现步骤

① 获取新闻数据
② 定义 template 模板
③ 编译模板
④ 定义时间过滤器
⑤ 定义补零函数

新闻列表接口文档

请求的根路径

http://www.liulongbin.top:3006

新闻列表

接口URL： /api/news
调用方式： GET
参数格式：无
响应格式：
返回示例：

{
    "status": 200,
    "msg": "获取新闻列表成功",
    "data": [
        {
            "id": 1,
            "title": "5G商用在即，三大运营商营收持续下降",
            "source": "新京报经济新闻",
            "cmtcount": 58,
            "tags": "三大运营商,中国移动,5G商用",
            "img": "/images/0.webp",
            "time": "2019-10-28T03:50:28.000Z"
        }
    ]
}

实现代码：

html文件：

<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>
  <link rel="stylesheet" href="./assets/news.css" />
  <script src="./lib/jquery.js"></script>
  <script src="./lib/template-web.js"></script>
</head>

<body>

  <div id="news-list">

    <div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3006/images/0.webp" alt="">
      <div class="right-box">
        <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
        <div class="tags">
          <span>三大运营商</span>
          <span>中国移动</span>
          <span>5G商用</span>
        </div>
        <div class="footer">
          <div>
            <span>新京报经济新闻</span>&nbsp;&nbsp;
            <span>2019-10-28 11:50:28</span>
          </div>
          <span>评论数：58</span>
        </div>
      </div>
    </div>

    <div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3006/images/1.webp" alt="">
      <div class="right-box">
        <h1 class="title">国际媒体头条速览：特朗普宣布杀死巴格达迪时，有人想起了奥巴马</h1>
        <div class="tags">

          <span>特朗普</span>

          <span>巴格达迪</span>

          <span>奥巴马</span>

        </div>
        <div class="footer">
          <div>
            <span>环视全球</span>&nbsp;&nbsp;
            <span>2019-10-27 13:50:55</span>
          </div>
          <span>评论数：56</span>
        </div>
      </div>
    </div>

    <div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3006/images/2.webp" alt="">
      <div class="right-box">
        <h1 class="title">华为5G随行WiFi发布，5G布局全面领先苹果、三星</h1>
        <div class="tags">

          <span>华为</span>

          <span>苹果</span>

          <span>5G网络</span>

        </div>
        <div class="footer">
          <div>
            <span>驱动中国网络传媒</span>&nbsp;&nbsp;
            <span>2019-10-26 16:51:30</span>
          </div>
          <span>评论数：32</span>
        </div>
      </div>
    </div>



  </div>

</body>

JS文件：

$(function () {
  // 给时间补零的函数
  function padZero(n) {
    if (n < 10) {
      return '0' + n
    } else {
      return n
    }
  }

  // 定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function (dtStr) {
    var dt = new Date(dtStr)

    var y = dt.getFullYear()
    var m = padZero(dt.getMonth() + 1)
    var d = padZero(dt.getDate())

    var hh = padZero(dt.getHours())
    var mm = padZero(dt.getMinutes())
    var ss = padZero(dt.getSeconds())

    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

  // 获取新闻列表的函数
  function getNewsList() {
    $.get('http://www.liulongbin.top:3006/api/news', function (res) {
      if (res.status !== 200) {
        return alert('获取新闻列表数据失败！')
      }
      for (var i = 0; i < res.data.length; i++) {
        // 把每一项的 tags 属性，从字符串改造成字符串的数组
        res.data[i].tags = res.data[i].tags.split(',')
      }
      console.log(res)
      var htmlStr = template('tpl-news', res)
      $('#news-list').html(htmlStr)
    })
  }

  getNewsList()

})