Question

我正在尝试使用JQuery的.load（）来创建一个包含动态内容的div，但我找到的建议解决方案似乎都没有像我想要的那样工作。

目前，我有以下设置：

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，但是我并没有摆脱“替换整个身体”的行为，导致只有一个更新取代整个身体而不是内容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 echos结果将内容返回到预期的DIV，并且不需要DOM操作，这对我的项目来说是最简单的方法所以远。

Jquery .load（）重写整个页面

2 个答案: