Question

我想加载一个html页面而不刷新页面或更改其URL。例如，如果我在http://localhost/sample/home并且我想导航到联系我们页面，我点击联系人链接并加载联系人页面内容而不刷新页面或更改网址。

如何做到这一点？

Answer 1

查看jQuery.load()的使用情况。

这允许您从URL加载HTML，并将其显示在页面的元素中。

因此你可以这样做：

$("body").load("/sample/contactus");

但是我不推荐这个，因为它不适合搜索引擎优化或可访问性。此外，它不会减少加载时间，因为您仍然需要为整个其他页面发出HTTP请求。

Answer 2

模拟HTML：

<div id="links">
    <a href="/contactus.html">Contact Us </a>
</div>
<div id="content"></div>

JS：

$(function() {
    $("#links > a").click(function(e) {
        e.preventDefault(); //so the browser doesn't follow the link

        $("#content").load(this.href, function() {
            //execute here after load completed
        });
    });
});

jQuery .load() - 从服务器加载数据并将返回的HTML放入匹配的元素

Answer 3

类似的东西：

$('#content').load('ajax/contact.html', function() {
  alert('Load was performed.');
});

http://api.jquery.com/load/

如何在不刷新页面或更改URL的情况下加载不同的html页面？

3 个答案: