将mysql中的数据，实时显示在网页中

页面实时刷新并显示mysql中变化的数据

彩虹海的约定·

1527人浏览 · 2023-03-14 16:48:19

彩虹海的约定· · 2023-03-14 16:48:19 发布

后端使用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>

进入页面为：