Ajax案例：新闻列表

最新推荐文章于 2022-12-03 06:24:01 发布

Youser511

最新推荐文章于 2022-12-03 06:24:01 发布

阅读量440

点赞数

分类专栏：学习文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_45025670/article/details/126103668

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

在这里插入图片描述
引入了jQuery和模板引擎

.news-item {
  display: flex;
  border: 1px solid #eee;
  width: 700px;
  padding: 10px;
  margin-bottom: 5px;
}

.thumb {
  display: block;
  width: 230px;
  height: 140px;
  background-color: #ccc;
  margin-right: 10px;
}

.right-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: normal;
}

.tags span {
  display: block;
  float: left;
  background-color: #F0F0F0;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  margin-right: 8px;
}

.footer {
  display: flex;
  justify-content: space-between;
}

<div id="news-list">
      <div class="news-item">
        <img class="thumb" src="" 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 10:14:38</span>
            </div>
            <span>评论数：66</span>
          </div>
        </div>
      </div>
    </div>

模板引擎：

<script type="text/html" id="tql-news">
    {{each arr}}
      <div class="news-item">
        <img class="thumb" src="http://www.liulongbin.top:3006{{$value.img}}" alt="" />
        <div class="right-box">
          <h1 class="title">{{$value.title}}}</h1>
          <div class="tags">
            {{each $value.tags}}
            <span>{{$value}}</span>
            {{/each}}
          </div>
          <div class="footer">
            <div>
              <span>{{$value.source}}</span>&nbsp;&nbsp;
              <span>{{$value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount}}</span>
          </div>
        </div>
      </div>
      {{/each}}
    </script>

这里{{$value.time | dateFormat}}是一种叫过滤器的东西，是模板引擎的一种语法…跳转


$(function () {
// 定义时间格式化
// 过滤器
template.defaults.imports.dateFormat = function (date) {

    var d = new Date(date);

    var y = d.getFullYear();
    var m = d.getMonth() + 1;
    var dd = d.getDate();

    var hh = d.getHours();
    var mm = d.getMinutes();
    var ss = d.getSeconds();
    return y + '-' + m + '-' + dd + ' ' + hh + ":" + mm + ":" + ss;
}

function getNews(){
    $.ajax({
        type:'GET',
        url:'http://www.liulongbin.top:3006/api/news',
        success:function(res){
            console.log(res);
            let { data, msg, status } = res;
            //console.log(data);
            if (status !== 200) return alert(msg);
            data.forEach(value => {
                value.tags = value.tags.split(',');
            });
            // console.log(data);
            var htmlStr = template('tql-news',{arr:data});
            $('#news-list').html(htmlStr);
        }
        
    })
}
getNews();
})