1

假设我有一个带有表格的 div。我想远程通知 html 页面该表已更新为其中的另一行。这在 Html 中甚至可能吗？

我将仅出于测试目的这样做，并将在我发送通知的同一台计算机上查看该站点，因此我们在这里处理的不是“安全”问题。

<html>
<head>
</head>
<body>
    <div id="test">
        <table>
            <tr>
                <td id="name">Harry</td>
            </tr>
        </table>
    </div>
</body>
</html>

我想通知 Html 站点id="test"使用新表更新 div，而用户在 html 站点中按下任何内容。来自站点上其他地方的 IE 执行一个功能，该功能将在收到通知时实时更新 div。

   <table>
        <tr>
            <td class="name">Harry</td>
            <td class="name">Flynn</td>
            <td class="name">Niklas</td>
        </tr>
    </table>

我知道这是一个奇怪的问题，而且相当不具体，对此我深表歉意。我想要做的是拥有一个 SQL 数据库，一旦数据库更新，它应该通知 html 页面自行更新，但正如我所说，我不知道这是否可能。

4

5 回答 5

2

您不能直接“通知”HTML 页面（即“推送”），但是您可以做的是以预定的时间间隔在页面上运行 javascript，例如每 10 秒或任何适合您的时间，以轮询服务器端对于任何新数据并更新 HTML。你会有类似的东西

var interval = setInterval(function() { updateTestData(); }, 10000);

function upateTestData() {
    //use ajax to poll for new data and update DOM tree
}

或者您只能在必要时请求再次更新：

var timer = setTimeout(function() { updateTestData(); }, 10000);

function upateTestData() {
    //use ajax to poll for new data and update DOM tree
    ...
    if(need to refresh again after some time) {
        timer = setTimeout(function() { updateTestData(); }, 1000);
    }
}
于 2013-04-29T09:48:33.077 回答
0

正如@aleks-g 解释的那样，您不能将信息推送到 html。

但是，您可能会使用许多免费或廉价的推送服务。它们带有简单的 javascript 配置，其想法是服务器发送一些信号，并在发送该信号时触发 javascript 侦听器。
通过这种方式，您可以拥有实时行为，而无需触发过多的 ajax 调用。

您可以使用Socket.IO和Node.js来实现它，或者使用一些现有的服务作为Pusher。

于 2014-12-24T12:19:24.347 回答
0

您可以使用 AngularJs 或 KnockoutJs，它们是两个 javascript 框架，可根据视图模型的变化自动更新 dom 元素。

  1. 您将数据发送到服务器或 sql server。
  2. 您将更新的数据返回到视图模型所在的 html 页面。
  3. viewmodel 构造函数（knockout 或 angularJs）获取更新的数据并根据它拥有的绑定更新 dom 元素。
于 2013-04-29T09:48:01.087 回答
0

您可以使用一种称为 Ajax 的技术来做到这一点。

您需要做的是每隔一定时间设置一个超时，并使用 ajax 向服务器发送查询并检查表中是否有更多行要添加。

网上有很多Ajax相关的教程，这个网站有一个，例如：http ://www.w3schools.com/

于 2013-04-29T09:48:40.493 回答
0

这websockets将是最终的解决方案，但在您的情况下实施起来有点复杂。此外，只有上一代浏览器支持它。

您应该在 HTML 页面中创建一个 setInterval 函数，并检查存储在数据库中的时间戳，例如了解您的页面是否是最新的。

例如 ：

在您的 HTML 页面中：

var now = new Date();
var timestamp = now.getTime();

setInterval(function(){
    $.post('retrieveLastTimestamp.php',{},function(data){
        if(intval(data) > timestamp)
        {
            //The page is no longer up to date
            document.location.reload(true);
        }
    });
},5000);

//Call this function to update the last timestamp dta of your page after row insertion
function updateTimestamp()
{
    var now = new Date();
    var timestamp = now.getTime();
    $.post('updateTimestamp.php',{timestamp : timestamp },function(data){
        alert('timestamp update done');
    });
}

检索LastTimestamp.php

<?php 
    //SQL request to retrieve the last refresh timestamp
    echo timestamp;
?>

更新时间戳.php

<?php 
    //SQL request updtae the last timestamp
    $timestamp = $_POST['timestamp'];
?>
于 2013-04-29T09:54:40.807 回答