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

步骤
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>Documenttitle>
    <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>
    
   <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();
})

你可能感兴趣的:(ajax,jquery,javascript)