模板引擎使用thtmeleaf.
给div中的表格赋值:
如图,点击红色框位置,让数据动态变化。页面代码如下:
<a href="javascript:;" data-index="0" class="active" th:οnclick="showAbNormal()">故障设备监控</a>
<div id="abNormal" class="content" style="display: none;">
<div class="head">
<span class="col">故障时间</span>
<span class="col">设备地址</span>
<span class="col">异常原因</span>
</div>
<div class="marquee-view">
<div class="marquee" th:fragment="errVedios" id="errVedios">
<div class="row" th:each="errVedio:${errVedios}">
<span class="col"th:text="${errVedio.vedioTime}"></span>
<span class="col" th:text="${errVedio.unitName}"></span>
<span class="col">网络故障</span>
<span class="icon-dot"></span>
</div>
</div>
</div>
</div>
js代码如下(赋值在此处,注意隐藏和显示div的方法):
function showAbNormal() {
var prefix = ctx + "swsp/screen";
$.ajax({
url: prefix + "/homePage/showABNormal",
type: "POST",
success: function (data) {
console.log(data);
$("#errVedios").append(data);
$('#abNormal').show();
$('#normal').hide();
}
})
}
后端代码如下:
@PostMapping("/homePage/showABNormal")
@ResponseBody
public List<ZhxfVedio> selectErrVedio(Model mmap)
{
String state = "1"; //错误状态
List<ZhxfVedio> errVedios = zhxfVedioService.selectErrVedio(state);
mmap.addAttribute("errVedios", errVedios);
return errVedios;
}
二、html中JS有效,但是在JSP页面中无效。
原因:
jQuery的function前面的
与
J
S
P
页
面
的
J
S
T
L
的
与JSP页面的JSTL的
与JSP页面的JSTL的冲突了,直接导致不认识此对象方法。
解决方法:
把jQuery代码里面的$全改成jQuery就可以正常使用了!