后端使用springboot+mybatis将需要取的数据封装在map中;
@RestController
@RequestMapping("time")
public class TimerTask {
@Autowired
private DetectService detectService;
@Autowired
private HostInformationService hs;
@Autowired
private HostInformationMapper hostInformationMapper;
@RequestMapping("All")
public Map<String, Object> getState() {
Map<String, Object> map = new HashMap<>();
String sip="5";
HostInformation hostInformation = hostInformationMapper.selectSip(sip);
map.put("name",hostInformation.getName());
map.put("address",hostInformation.getAddress());
map.put("id",hostInformation.getId());
return map;
}
前端连接后端接口编写显示字段的名称;(setInterval是定时刷新,时间五5000ms)
将各字段的数据取出并显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<body>
<div >姓名: <span id="name">--</span></div>
<div >身份证: <span id="id">--</span></div>
<div >地址: <span id="address">--</span></div>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script>
layui.use('jquery', function() {
var $ = layui.jquery;
setInterval(function() {
$.post('/time/All', function(data) {
$('#name').text(data.name);
$('#id').text(data.id);
$('#address').text(data.address);
});
}, 5000);
});
</script>
</body>
</html>
进入页面为:
5秒钟后:
这样每5秒就会刷新一次,将mysql中改变的字段实时刷新出来。