如何在Spring/HTML中创建无需刷新即可实时更新新数据条目/删除的表？
如何在Spring/HTML中创建无需刷新即可实时更新新数据条目/删除的表？
提问于 2021-08-02 18:28:50
实际上，我正在开发一个系统，在这个系统中，数据条目被输入到Java后端，并在UI前端(HTML)上显示。到目前为止，它工作得很好，但是我需要做的最后一步是让它更新日期表，显示实时进入/退出系统的内容。对于这种类型的全栈开发，我是一个完全的初学者，所以我不确定从哪里开始。我已经研究了php/javascrip/ajax/jquery，但还不知道从哪里开始，希望能得到一些指导。
摘要: Java后端有数据被输入到它随着时间的推移HTML/ThymeLeaf前端被用来显示数据(但不是实时的，手动刷新页面)我希望能够实时显示内容而不必刷新页面。
非常感谢。
回答 1
Stack Overflow用户
发布于 2021-08-02 20:14:34
根据你到底想做什么，你可以在每次从你的后端得到一个新的条目时添加一个<td>content</td>。
所以你的js应该是这样的：
function addRow(entry) {
const el = document.getElementById('table');
el.innerHTML += `<tr><td class="appear">${entry}</td></tr>`;
}
// if you use a websocket for example:
const ws = new WebSocket('wss://localhost:8080');
ws.on('dataentry', (entry) => {
addRow(entry);
});这是你的css：
.appear {
background: rgba(255, 255, 0, 0);
transition: color;
animation-name: appearAnimation;
animation-duration: 0.3s;
}
@keyframes appearAnimation {
from {
background: rgba(255, 255, 0, 0.9);
}
to {
background: rgba(255, 255, 0, 0);
}
}html：
<table id="table">
</table>这段代码主要是在“dataentry”事件上侦听一个websocket，然后调用addRow，它会用一些示例数据向表中添加一行。
如果有什么不清楚的地方，写一条评论！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68626421
复制相关文章
相似问题
腾讯云开发者
