在 div 中加载 html 内容答案

【问题标题】：Load html content in div在 div 中加载 html 内容
【发布时间】：2013-09-20 05:39:37
【问题描述】：

我正在尝试使用 jquery .load 将另一个 html 文件中的内容加载到我现有的 html 文件中

但不幸的是它没有加载内容。

请给我建议正确的解决方案。

这是我现有的 html 和 jquery 从外部 HTML 文件加载内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Review</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
            <ul class="reviews" id="revw">

            </ul>
    </div>
    <script>
    function check(){
$( "#revw" ).load( "review_list.html #test" );
}
    </script>
    </body>
    </html>

我们需要从中加载内容的页面

<html>
<head></head>
<body>
<div id='test'>
 Load this content to the id="revw" div.
</div>
</body>
</html>

【问题讨论】：

你没有在任何地方调用函数check()..
@techfoobar 更新了代码

标签： jquery html load jquery-load

【解决方案1】：

你没有在任何地方调用函数check()。

试试这个：

...
<script>
function check() {
    $( "#revw" ).load('review_list.html #target');
}
$(document).ready(function() {
    check(); // call the function
});
</script>
...

【讨论】：

我试过这个但没用..$(document).ready(function() { check(); $( "#revw" ).load( "review_list.html #test" ); });
我在本地和纯 html 文件中这样做
我相信这会有所帮助：en.wikipedia.org/wiki/Cross-origin_resource_sharing
@techfoobar 是否可以像这样指向 html 文件的路径：foldername/review_list.html ？

【解决方案2】：

使用$.get 试试这个。

 $(document).ready(function() {
    $.get('review_list.html')
             .success(function(data) {
                 $('#revw').html(data);
             });
    });

您的 HTML 页面

<div id='test'>
 Load this content to the id="revw" div.
</div>

【讨论】：

XMLHttpRequest cannot load file:///D:/V_2/review_list.html. Origin null is not allowed by Access-Control-Allow-Origin. 当我在检查元素 cosole (chrome) 中看到此错误。内容未加载
如果没有 Web 服务器，您将无法加载、发布或获取。只有纯 html 文件适合您（即）没有 Web 服务器，任何 xmlHttpRequest 都无法工作。
我只使用纯 html 文件。我的文件夹中只有这 2 个文件，但它没有加载内容？我需要将文件上传到服务器才能得到结果吗？
是的，需要上传到服务器才能得到结果。

【解决方案3】：

请参考此链接：

Load one page in to another using Jquery

对你的问题有详细的解释

Delayed loading of a html page using jquery

这两个都能解决问题。

【讨论】：