Question

我正在构建一个简单的网站，其中包含一个标题（标题和菜单）和一个表格，其中放置了内容（因为这样我可以使布局更容易）。问题是每次我更改类别（单击菜单中的链接）时，整个站点在短时间内变为白色，同时加载。我喜欢它所以这不会发生，所以我只需要加载表的内容，而不是整个页面。我想这可以很容易地使用框架完成，但我被告知他们将很快停止支持，并且使用它们是一个不好的做法。有没有办法做到这一点？

暂时，网站就在这里，所以你可以看到我正在谈论的效果： ~~http://bljak.org:1235/index.html~~ 。

此外，如果网站只是HTML和Javascript，那将是最好的，因为我并不熟悉PHP（我在512Mb内存的上网本上编码，所以我怀疑我可以在那里启动服务器）。

Answer 1

您可以使用innerHTML重写标记及其关闭标记之间的文本：

<script type="text/javascript">
function changeText(){
    document.getElementById('tbl').innerHTML = '<table><tr><td>New Text</td></tr></table>';
}
</script>
<div id="tbl"></div> 
<input type="button" onclick="javascript:changeText()" value="Change Text"/>

Answer 2

我将基于jQuery让位 - 这是最简单和最简短的方式。

首先，下载最新的jQuery库 - 可以找到here。

假设您将本地文件命名为“jquery.min.js”，在现有HTML代码中包含这样的行以“包含”jQuery库：

<script type="text/javascript" src="jquery.min.js"></script>

现在您只需要在页面中使用此代码即可：

<script type="text/javascript">
    $(document).ready(function() {
        $("a").bind("click", function() {
            var href = $(this).attr("href");

            //bust nasty browser AJAX cache:
            href += "?nnn=" + parseInt(Math.random() * 1000000);

            $("#Container").load(href);
            return false;
        });
    });
</script>

将容器替换为页面中应包含“正文”的实际元素的ID，然后单击任何链接将导致链接页面加载到容器中而不会重新加载整页。

代码非常简单，可以随意询问您是否想了解它的任何部分。

jQuery不到100K，所以现代互联网速度真的不应该是任何问题 - 纯JavaScript当然是可能的，但是会让它在浏览器中引起很多麻烦。

如何使用Javascript将HTML代码加载到表中？

2 个答案: