时间戳

首页 > 解决方案 > 当来自对象的数据发生更改而不重新加载页面时自动更新页面的一部分

javascript - 当来自对象的数据发生更改而不重新加载页面时自动更新页面的一部分

问题描述

我将数据插入到从后端收集的各种 div 中。这些数据得到更新，我需要让 div 也自动更新 div 中的数据，而无需实际刷新整个页面。现在页面刷新会更新 div，但我希望 div 自动更新而不影响用户体验。有什么建议么。例如，我在前端有一个向上/向下投票按钮，投票被发送到后端，然后发送回前端并插入到一个 div 中，但是除非他们刷新，否则他们不会在前端看到他们的投票记录页面，所以我需要每次在前端更新用户投票结果，然后自动投票或更改投票等。这只是一个示例，该表中插入了更多数据，可以随时更新。

更新，不确定人们是否完全理解我需要或试图做什么。基本上有来自后端的对象，在页面加载时，来自该对象的数据被插入到表中，例如新帖子、投票等。

我需要做的是检查自页面加载以来对象是否已更改，如果是，则在不刷新页面的情况下更新页面上的数据。

理想情况下，这需要立即发生，因此它会在对象数据与浏览器中显示的数据之间存在差异时立即识别并更新它。

希望这能让我更清楚我想要做什么。

我有和反对的信息，如建议标题、描述、投票状态等，当一个新的时，这些被插入到一行中。当带有主对象的新对象通过时，将添加一个新行。所以我需要能够检查主对象中的更改，以便我可以将新对象作为行添加到表中，还可以检测和更新已插入的当前对象的任何更改。

标签： javascriptajaxpage-refresh

解决方案

如果我理解正确，您想要的只是一种无需刷新页面即可与后端交互的方式，对吗？如果是这种情况，您应该研究 AJAX。这是将它用于投票系统示例的简单方法（需要 jQuery）：

$.post(url_to_interact_with,{key: 1232,vote:1}, function(data){
   console.log(data);
}

在这种情况下，您发送了一个带有 key=1232 和投票 1 的 post 请求。函数中的变量 (data) 是请求的输出。

但是，如果这对您来说不是一件简单的事情，我建议您查看 websockets。总结一下它们是什么：后端和前端之间的来回交互。后端可以随时发送信息，无需刷新页面。如果 websockets 太混乱，那么使用这个：https ://pusher.com/

但老实说，除非绝对必要，否则您不应该尝试实时了解 div 的所有信息的方法。祝你好运！:)

推荐阅读