ajax+spring boot 处理前端List的展示问题

前言

之前有写过ajax+spring boot的教程，但是主要是做的业务逻辑是后端查询判断，然后返回对或错两个结果，前端再按照结果来做简单的处理，具体看spring boot+mybatis+ajax实现注册功能，以及这个过程遇到的坑和学到的知识。 这一篇教程主要重点再前端的处理，后端的话我就补贴太多的代码，可以看上面那片注册功能的教程。

正文

业务逻辑

再其他页面点击后到后端查出数据然后跳转到这个页面，然后把查询到的数据展示再左边红色框的位置。而右边的红色框则是到这个页面后自动调用ajax去处理数据后再展示到这里，今天主要将右边红色框的业务逻辑。

代码

后端代码其他省略，具体看我上面说到的其他两篇教程。
控制层

import java.util.List;

@RestController     //返回json数据
public class IndexController {      //主页控制层

    @Autowired
    private IndexShowService indexShowService;

    @GetMapping(value = "/countlikes")
    public RespEntity countLikes(){     //最受欢迎的视频
        List countlikes=indexShowService.countLikes();
        RespEntity respEntity=new RespEntity(RespCode.SUCCESS,countlikes);
        return respEntity;
    }
}

前端页面（上图右边的红色框）

<div id="like0" class="post wrap-vid">
	<div class="zoom-container">
		<div class="zoom-caption">
			<span class="likevtag" style="font-size:7px">视频标签</span>
			<a class="likeurl" href="single.html">
				<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
			</a>
			<p class="likevname" style="font-size:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">视频名称</p>
		</div>
		<img class="likeimage" style="height: 78px;width:140px" src="/images/7.jpg" />
	</div>
	<div class="wrapper">
		<h5 class="vid-name"><a href="#" class="likevname likeurl" style="width:155px;display: -webkit-box; word-break:break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;text-overflow:ellipsis;overflow: hidden;">视频名称</a></h5>
		<div class="info">
			<h6>上传人：<a class="likeusername">Kelvin</a></h6>
			<span class="likedate"><i class="fa fa-calendar"></i>25/3/2015</span>
			<span class="countall"><i class="fa fa-heart"></i>1,200&nbsp;&nbsp;&nbsp;<i class="fa fa-eye"></i>1000</span>
		</div>
	</div>
</div>
<div id="like1" class="post wrap-vid">
	省略代码......（代码和上面div块一样）
</div>
<div id="like2" class="post wrap-vid">
	省略代码......（代码和上面div块一样）
</div>

ajax(single.js)
这里重点是用$.each来处理后端传过来的list数据，按照前端标签的class来把相关数据展示到前端。然后具体要怎么写就要看你的数据，我曾在spring boot分页教程里面说过类似的情况的处理，让你们看一下我的数据。所以你们就会大概明白ajax中数据要怎么写了。

$(document).ready(function () {
    contlikes();        //进入页面时自动调用
})

function contlikes(){  //受欢迎的视频
    $.ajax({
        url:"/countlikes",
        type:"GET",
        dataType:"JSON",
        success:function (data) {
            if(data.code==0){
                $.each(data.data, function(i,val) {  //两个参数，第一个参数表示遍历的数组的下标(0开始)，第二个参数表示下标对应的值
                    var likeid='#like'+i;   //id号
                    $(likeid+" .likevtag").text(val.vtag); //标签
                    $(likeid+" .likevname").text(val.vname);    //视频名
                    var likedate="<i class='fa fa-calendar'></i>"+val.date;
                    $(likeid+" .likedate").html(likedate);      //上传时间
                    $(likeid+" .likeusername").text(val.user.username);     //上传人
                    $(likeid+" .likeimage").attr("src",val.imageurl);      //封面
                    $(likeid+" .likeurl").attr("href",'/single/'+val.vid);      //路径
                    var countall="<i class='fa fa-heart'></i>"+val.countlikes+"&nbsp;&nbsp;&nbsp;<i class='fa fa-eye'></i>"+val.countlooks;
                    $(likeid+" .countall").html(countall);      //数据
                })
                // var jsonData=JSON.stringify(data.data);      //把对象变成字符串
                // alert(jsonData);
            }
        }
    })
}

结语

教程大概就是这样，有什么问题欢迎留言探讨。
参考：Ajax如何获取后台数据显示到List

---

题外话：
①在做这个页面的时候设计到视频播放。这个我之前只知道用embed标签，而且时间比较久也忘记了。然后我查了相关资料，发现处理视频播放还是比较复杂的。
具体如下文章，有兴趣的看一下：
HTML5对video视频的相关要求
html5新媒体播放器标签video、audio 与embed、object
②时间问题，之前出现查找的时间和后端不符合并且为英文，在之前另一篇分页的教程中前端用thymeleaf的[[${#dates.format(page.date,"yyyy-MM-dd HH:mm:ss")}]]解决了，但是今天的这个教程不知道为什么显示的时间还是错误的并且为英文，后来我再实体类的时间属性上加了@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")就可以了（但是分页那篇教程却不行，不知道是为什么）。时间问题的格式化有时间我再去研究一下。
@JsonFormat时间格式化注解使用