java Spring MVC 定时获取数据库数据，不用刷新更新页面数据

Question

Controller.java
//获取节目列表
@ResponseBody
@RequestMapping(value = "/list")
public ModelAndView list(Page page) throws Exception {
ModelAndView mv = this.getModelAndView();
try {
PageData pd = getPageData();
page.setPd(pd);
mv.setViewName("system/hls/advert_list");
List<PageData> list =hs.listWords(page);
mv.addObject("list",list);
mv.addObject("pd", pd);
} catch (Exception e) {
logger.error(e.toString(), e);
}
return mv;
}jsp <!-- 检索  -->
<form action="<%=basePath%>hls/list.do" method="post" name="userForm" id="userForm"> <table id="table_report" class="table table-striped table-bordered table-hover">

<thead>
<tr>
<th class='center' id="L_XUHAO">序号</th>
<th class='center' id="码率状态">码率状态</th>
<th class='center' id="名称">名称</th>
<th class='center' id="切片时间">切片时间</th>
<th class='center' id="包数量">包数量</th>
<th class='center' id="类型">类型</th>
<th class='center' id="地址">地址</th>
<th class='center' id="状态">状态</th>
</tr>
</thead>

<tbody>

<!-- 开始循环 -->
  <c:choose>
<c:when test="${not empty list}"> <c:forEach items="${list}" var="hls" varStatus="vs">

<tr>
<td class='center' style="width: 30px;">
${vs.index+1}
</td>
<td class='center'>${hls.rate } kbps</td>
<td class='center'>${hls.name}</td>
<td class='center'>1</td>
<td class='center'>5</td>
<td class='center'>udp/rtp</td>
<td class='center'>${hls.address}</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="10" class="center" id="L_MEIYOUXIANGGUANSHUJU">没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
</form>
</div>
      <script type="text/javascript"> setInterval(timerRate(), 3000);
setTimeout(timerRate(), 3000);

function timerRate(){
$.ajax({
url : '${pageContext.request.contextPath}/hls/list.do',
type : 'post',
dataType : 'json',
success : function(result) { } 
});
}
</script> </body>
</html>

Answer 1

我也想知道，貌似ajax可以实现，但是不知道具体怎么写

Answer 2

在success里面把result结果循环，重新构造table

Answer 3

1、引入jquery
2、
<script>
setInterval(function(){
$.get({
url:"list",
dataType:'json',
success:function(data){
var list = data.list;
var tbody = $(tbody);
tbody.html('');
if(list.length==0){
tbody.append(`<tr class="main_info">
<td colspan="10" class="center" id="L_MEIYOUXIANGGUANSHUJU">没有相关数据</td>
</tr>`);
}
else{
$.each(list,function(i,v){
var d = $(this);
var html = `
<td class='center' style="width: 30px;">
`+i+`
</td>
<td class='center'>`+d.rate+`</td>
<td class='center'>`+d.name+`</td>
<td class='center'>1</td>
<td class='center'>5</td>
<td class='center'>udp/rtp</td>
<td cass='center'>`+d.address+`</td>
</tr> `;
tbody.append(html);
});
}
}
});
},3000);
</script>

Answer 4

setlnterval改成setInterval(function(){mehod()},1000)