Question

我正在测试接收SSE数据

这是我的stream.php文件：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: test\n\n";
flush();
?>

接收我使用的数据：

var source=new EventSource("stream.php");
    source.onmessage=function(e)
    {
      //document.getElementById("result").innerHTML+=e.data + "<br/>";
        $("#result").html(e.data);
    };

当我使用document.getElementById("result")时，它会反复显示数据。但是当我使用$("#result").html(e.data)时，却没有。为什么？

Answer 1

.innerHTML +=添加了已经存在的HTML，请注意+=，而jQuery的html()方法每次都会覆盖HTML。

jQuery还有其他一些方法可以添加到现有标记中，例如append()。

Answer 2

使用vanila脚本+=e.data，您将新内容附加到现有标记，但.html()会覆盖现有值。

$("#result").append(e.data + '<br/>')

或

$("#result").html(function(_, html){
    return html += e.data + '<br/>';
})

Answer 3

+=中的.innerHTML+=正在将内容附加到现有内容中。这相当于$("#result").html($("#result").html() + e.data);

document.getElementById vs jQuery $ html（）接收服务器发送的事件数据

3 个答案: