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

Question

我想在不刷新页面或更改其 URL 的情况下加载 HTML 页面。 举个例子，如果我在 http://localhost/sample/home，并想要导航到联系我们页面，我可以单击联系链接，联系页面的内容会在不刷新页面或更改 URL 的情况下被加载。 如何实现这个功能？

- Sami

---

http://en.wikipedia.org/wiki/Ajax_(programming) - Mitya

Answer 1

了解使用jQuery.load()。

这可以让您从URL加载HTML，并在页面中的元素中显示它。

因此，您可以执行以下操作：

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

---

然而，我不建议这样做，因为这对于SEO或可访问性来说并不好。此外，它不会减少加载时间，因为您仍需要为整个页面进行HTTP请求。

- Curtis

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放置到匹配的元素中。

该API是jQuery中的一个函数，用于从服务器获取数据并将返回的HTML代码插入到指定的元素中。

- nbrooks

Answer 3

类似于：

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

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

- LiamB