利用Ajax对接口将数据渲染到页面中

最新推荐文章于 2024-05-29 14:49:41 发布

小李小李~啦啦啦

最新推荐文章于 2024-05-29 14:49:41 发布

阅读量5.2k

点赞数 2

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/weixin_43164078/article/details/120588885

版权

这篇博客主要展示了如何使用Art-Template库结合Ajax从服务器获取数据，并动态渲染到HTML页面中。通过创建一个JavaScript函数getNewsList，利用jQuery的Ajax方法获取新闻列表，然后使用template引擎将数据填充到预定义的HTML模板中，实现新闻项的展示，包括标题、图片、标签和相关信息。

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

步骤
1.将要渲染数据的模板的大体框架搭好
2.引入art-template引入模板，在Js文件中通过函数template(‘id选择器的名字’，要渲染的数据)并将其赋值给一个变量，将该变量放到我们写好的模板中[通过JQuery中的html来添加]
3.上述模板都搭建好后，就开始写js函数啦
（1）在Js文件中定义一个获取数据的函数，根据接口文档来写Ajax，判断数据是否获取成功，成功后将步骤2的代码贴上去这样就将数据渲染到页面中啦
（2）里面的具体数据还是要根据接口的名字通过标准语法来添加，千万不要忘记调用函数
下面附上我的代码
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="../Code/案例图书馆管理.html/jquery-3.5.1.js"></script>
  <script src="./index.js"></script>
   <script src="../表单的监听事件/template-web.js"></script>
</head>
<body>
    <div id="news-list">
   
</div>
    <!-- 定义template模板 -->
   <script type='text/html' id="tpl-news">
    <div id="news-item">
        {{each data}}
        <div class="right">
            <img src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="">
        </div>
        <div class="left">
            <h3>{{$value.title}}</h3>
            <span>
               
                <ul>
                    {{each $value.tags}}
                    <li>{{$value}}</li>
                    {{/each}} 
                </ul>
               
            </span>
            <div class="bottom">
                <span>{{$value.source}}{{$value.time}}</span>
                <span>评论数{{$value.cmtcount}}</span>
            </div>
        </div>
    </div>
    {{/each}}
   </script>
</body>
</html>

CSS代码

#news-list{
    width: 600px;
    height: 100%;
}
#news-item{
    width: 600px;
    height: 200px;
    border: 1px solid #ccc;

}
.right{
    width: 150px;
    height: 150px;
    background-color: gray;
    margin-top:10px;
    margin-left: 10px;
    float: left;
}
img{
    width: 150px;
    height: 150px;
}
.left{
    width: 430px;
    height: 200px;
    margin: left 10px;

    float: right;

}
ul{
    list-style: none;
    margin-top: 60px;
}
li{
    display: block;
    float: left;
    font-size: 10px;
    margin-left: 20px;
    width: 50px;
    height: 20px;
    background-color: #ccc;
    border-radius: 8px;
    text-align: center;
   line-height: 20px

}
.bottom{
    width: 100%;
    height: 20px;

    margin-top: 130px;
    font-size: 10px;
}
.bottom span:first-child{
    float: left;
}
.bottom span:last-child{
    float: right;
}

js代码

$(function(){
    //  获取新闻列表的函数
    function getNewsList(){
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/news',
            data: {},
            success:function(res){
                if(res.status!=200){
                    alert('新闻列表获取失败')
                }
                // 将tag属行改成字符串数组
                for(var i=0;i<res.data.length;i++){
res.data[i].tags=res.data[i].tags.split(',')
                }
                console.log(res);
                var htmlstr=template('tpl-news',res)
             $('#news-list').html(htmlstr)
            }

        })
    }
    getNewsList();
})

小李小李~啦啦啦

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
利用Ajax对接口将数据渲染到页面中

步骤1.将要渲染数据的模板的大体框架搭好2.引入art-template引入模板，在Js文件中通过函数template(‘id选择器的名字’，要渲染的数据)并将其赋值给一个变量，将该变量放到我们写好的模板中[通过JQuery中的html来添加]3.上述模板都搭建好后，就开始写js函数啦（1）在Js文件中定义一个获取数据的函数，根据接口文档来写Ajax，判断数据是否获取成功，成功后将步骤2的代码贴上去这样就将数据渲染到页面中啦（2）里面的具体数据还是要根据接口的名字通过标准语法来添加，千万不要忘记调
复制链接

扫一扫