javascript - 如何使用 jquery.load 来检索 html/ 的一部分或完整的 html？

Question

我正在尝试使用 jquery 的加载功能加载整个/部分 html。我知道这也可以使用 $.ajax() 来完成，但我想学习如何使用 jquery 的不同功能。

这是我当前的代码：

<ul>
    <li><a id="home" href="#">Home</a></li>
    <li><a id="contact" href="#">Contact</a></li>
    <li><a id="gallery" href="#">Gallery</a></li>
</ul>


<div id="result">

</div>

<script>
$(document).ready(function(e) {
    $("#gallery").click(function(e){
        $('#result').load('gallery.html');
        e.preventDefault();
    });
 });
</script>

目前它不起作用，我也得到了这个

XMLHttpRequest 无法加载 file:///C:/Users/randel/Desktop/cis/gallery.html。Access-Control-Allow-Origin 不允许 Origin null。

Answer 1

jQuery 无法从您的文件系统中检索文件。您必须将您的项目移动到 Web 服务器或本地开发服务器，如 XAMPP 或类似服务器

除此之外，您的代码应该可以工作。只要记住把e.preventDefault()一切放在首位：

$("#gallery").click(function(e){
    e.preventDefault();
    $('#result').load('gallery.html');
});