Question

我已经毫不费力地尝试和研究了几天。

基本上，我想要实现的是页面之间的AJAX。我知道如何使用AJAX / JQuery将文件从文件加载到页面中，但它有点不同。

假设共有2页。

的index.php info.php的

当我点击从Index.php到Info.php的链接时，只需要替换特定DIV中的内容（如主要内容）。

但是，当我访问Index.php时，我会得到包含标题的完整页面。（明显）但是，如果我访问Info.php，我也希望获得带有标题和所有内容的整页（只是内容DIV的差异）。

我在网站上看到的很多，但似乎无法找到或弄清楚它是如何工作的。

基本上也可能只是替换两个页面之间不同的东西？（像delta加载一样，似乎被称为）

所有这一切的主要目的是让音乐播放器在页面加载之间流畅地播放。

任何人都可以解释这是如何运作的，还是让我朝着正确的方向前进？

非常感谢！：）

Answer 1

你可以做这样的事情

假设您#container div

中的所有内容

您的导航链接看起来像

<a href="index.php" class="ajax_link">Home<a>
<a href="infor.php" class="ajax_link">Information<a>

使用jquery

在您的javascript代码中

function ajaxPageLoader(request_url) {
    console.log("Content loading from : "+request_url);
    $("#container").load(request_url+" #container", function() {
        window.history.pushState({}, "", request_url); // update current url in browser.
        console.log("Content loaded");
    });
}

function changeState(state) {
    if(state !== null) { // initial page
        ajaxPageLoader(state.url);
    }
}

这是使用on()方法

的委托事件处理程序

$(document).ready(function(){
    $(document).on('click','.ajax_link',function(){
        ajaxPageLoader($(this).attr('href'));
        return false;
    });
});
// back button event
$(window).on("popstate", function(e) {
    changeState(e.originalEvent.state);
    return false;
});

使用AJAX加载内容，但访问时保持整页

1 个答案: