Jquery .load() 重写整个页面

Question

我正在尝试通过使用 JQuery 的 .load() 使 div 包含动态内容，但我发现 none 的建议解决方案似乎有效如我所愿

目前，我有以下设置：

t1.html（主页）

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="ts1.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    </head>
    <body>
        <div>TODO write content</div>
        <script>
            $(document).ready(function(){
                init_s();
            });        
        </script>
        <div>
            <div id="dt1"></div>
        </div>
    </body>
</html>

t3.php（应该加载的内容）

<?php
    echo '<div id="dt1"><script>document.write(Date());</script></div>'; 
?>

ts1.js（文件包含脚本）

function init_s()
{
    setInterval(function(){
    $("#dt1").load('t3.php');
    }, 2000);
};

但我似乎无法正常工作。加载页面后，它执行命令并完全替换文档正文。

我也试过其他方法，比如

$("#dt1").load('t3.php #dt1>*','');

和

$("#dt1").load('t3.php #dt1');

由于整个正文现在都被 t3.php 中的 dt1 的内容替换了，div 本身丢失了，因此没有后续更新。

我想我可能需要在 div 周围包装另一个 div 等等，但我并没有摆脱任何 "replace whole body" 行为，导致只有一次更新替换整个正文而不是 div.

的内容

Answer 1

这就是 document.write 所做的。

如果您运行在处于关闭状态的文档中（即已经加载（t1.html 已加载）），它将隐式调用 document.open 并擦除现有文档。

使用 DOM 操作而不是 document.write。

Answer 2

显然最好不要使用 javascript 标记其他页面。依靠 t3.php 中的普通 PHP 获得了可行的解决方案。

ts1.js中的调用保持不变

function (){
    setInterval(function(){
        $("#dt1").load('t3.php');
    }, 2000);
};

对于 t3.php 我使用以下方法来测试它是否按预期工作

<?php
    $date = date('Y-m-d H:i:s');
    echo $date; 
?>

像 Quentin 建议的那样删除 document.write() 解决了覆盖问题，而不是使用常规 PHP 回声导致内容像预期的那样返回到 DIV 并且不需要 DOM 操作，这是迄今为止我的项目最简单的方法。

Jquery .load() 重写整个页面

Jquery .load() rewrites whole page

html

jquery

load