使用JQuery将代码加载到HTML中？

Question

使用JQuery将代码加载到HTML中？

3

我知道这是可能的，并且我已经看过很多例子。我担心我已经知道了我的问题的答案，但也许我错过了什么。

我认为这不起作用是因为我正在本地运行此代码，而不是在服务器上运行。

在我的头标签中：

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

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").load("test.html");
        } );
</script>

在我的``标签中：

<div id="test"></div>

我的外部代码（在“test.html”内）

<div>This is what you should be seeing!</div>

这应该可以工作吧？此外，在我的外部HTML文档中，我需要设置所有额外的标签，以便文档看起来像这样：

<html>
    <head>
        <title>
        </title>
    </head>
    <body>

<div>This is what you should be seeing!</div>
</body>
</html>

我的所有文件都在同一个目录中。

谢谢。

- Hanna

1

尝试在test.html中删除额外的html标签，它应该只有div。此外，使用像Firebug这样的调试工具查看是否正在进行请求。 - The Scrum Meister

我知道脚本可以运行，因为我已经用alert()测试过了，但我会用Firebug再次确认。 - Hanna

3个回答

1

你的代码应该可以在 Web 服务器上运行！如果你是从你的桌面电脑上操作，请告诉我。

<script src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $("#test").load("./test.html"); //  also try /test.html
    } );
</script>
<div id="test"></div>

- S L

谢谢，但这基本上与我的代码完全相同，并具有相同的效果，即没有任何作用。 - Hanna

@Jonannes 老实说，你的代码是工作的，你可能有一些与你的 Web 服务器相关的错误...或者你可以尝试使用 AJAX 进行加载。 - S L

还要检查您的Firebug控制台（在“控制台”选项卡下，您应该会看到一个“GET”请求，在“网络”选项卡下，您也将能够在“所有”选项卡下看到），如果看到了，则说明您的代码正在工作。 - S L

FirebugиҜҙ$('#test').load('test.html');иҝҗиЎҢеҫ—еҫҲеҘҪпјҢдҪҶжҳҜжІЎжңүд»»дҪ•жҳҫзӨәгҖӮжҲ‘зҢңиҝҷеҸҜиғҪдёҺе®ғжҳҜжң¬ең°зҡ„жңүе…іпјҹ - Hanna

1

PS：它向服务器发送请求，而不是在文件系统上。 - S L

显示剩余3条评论

0

在 URL 后面使用可选选择器，只将 <body> 的内容（或其他内容）放入目标中：

   // will load the contents of test.html's body-element into #test  
   $("#test").load("test.html body");

- Dr.Molle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gustavo Costa De Oliveira · Accepted Answer

简单

$.get('test.html', function(data) {
    $('#test').html(data);
});

.load() 有不同的功能，可以在加载事件上绑定事件处理程序。

更新：

如果要添加数据而不是替换，请尝试使用 append。

$('body').append(data)