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

最新推荐文章于 2022-11-21 15:16:28 发布

库库好困

最新推荐文章于 2022-11-21 15:16:28 发布

阅读量704

点赞数 2

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

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

版权

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

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

案例-新闻列表

在这里插入图片描述

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">

最低0.47元/天解锁文章

库库好困

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
AJAX编程第三天案例：新闻列表

案例-新闻列表1. 实现步骤① 获取新闻数据② 定义 template 模板③ 编译模板④ 定义时间过滤器⑤ 定义补零函数新闻列表接口文档请求的根路径http://www.liulongbin.top:3006新闻列表接口URL： /api/news调用方式： GET参数格式：无响应格式：返回示例：{ "status": 200, "msg": "获取新闻列表成功", "data": [ { "id":
复制链接

扫一扫