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

[NO-BIBI]

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>

[NO-BIBI]

请求各路大神哥哥求帮帮忙

[诺丽果]

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

[QWERT4745]

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

[_hysx]

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>

[ar]

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