Ajax——新闻列表案例

最新推荐文章于 2022-12-01 16:15:20 发布

Zhangzilnn

最新推荐文章于 2022-12-01 16:15:20 发布

阅读量661

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Ajax案例文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_45998300/article/details/123213427

本文展示了如何结合jQuery和template-web.js库来获取并展示新闻列表。首先定义了一个获取新闻列表的函数，通过AJAX从API获取数据，并将tags属性转换为数组。接着，定义了一个HTML模板用于渲染新闻条目，包括图片、标题、标签、来源和时间。此外，还定义了时间格式化过滤器和补零辅助函数，以便更友好地显示时间。最后，所有新闻条目被插入到页面的news-list容器中进行展示。

导入：jquery.js + template-web.js

1.获取新闻列表数据

 // 获取新闻列表的函数
  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()

2.定义模版

将#news-list中的标签放入script中

<!-- 定义模板 -->
  <script type="text/html" id="tpl-news">
      {
  
  {each data}}
      <div class="news-item">
        <img class="thumb" src="{
  
  {'http://www.liulongbin.top:3006' + $value.img}