更改 div#content 而不使用 Jquery 重新加载答案

【问题标题】：Changing div#content without reloading using Jquery更改 div#content 而不使用 Jquery 重新加载
【发布时间】：2014-02-20 09:06:18
【问题描述】：

我整晚都在阅读这个板，但我没有找到任何能完全符合我需要的答案，所以我会问。

这是我在做什么的基本想法。

在页面加载时，淡入并显示默认页面。
用户点击导航链接 (a.navLink)。
div#content 淡出，调用函数重定向。
div#content 淡入新内容。

我有大约 90%，但是，它并不完全正确。我正在使用 PHP Switch 使用 $_GET 超级数组来管理网站上的内容。我的基本开关结构如下：

switch( $_GET['page'] ){
  default:
    //DISPLAY HOME PAGE
  break;

  case "story":
    // DISPLAY STORY
  break;

  case "contact":
    // DISPLAY CONTACT  
  break;    
}

等等……

我用来执行淡入/淡出动作的JQuery如下：

$("#content").css("display", "none");

$("#content").fadeIn(1000);

$("a.navLink").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(500, redirectPage);      

    function redirectPage() {
        window.location = linkLocation;
    } 

});

当前代码成功淡出，更改页面并淡入，但问题是网站重新加载，导致我在页面顶部的旋转横幅重新启动。此外，页面从顶部重新开始，就像网站刚刚加载一样。我知道这可能需要一个 AJAX 功能，但我使用 AJAX 的经验很少（我经常像瘟疫一样避免它）。

使用现有的 Switching 结构非常重要，但我在散列它方面没有取得多大成功。我将使用的 URL 是 DOMAIN.COM/index.php?page=pageName。同样，这个结构非常重要，不能改变。

对此的任何见解都会很棒。（再一次，我知道这个问题类型可能以前被问过，但我觉得我最多需要一行，我正在尝试找出那是什么）

【问题讨论】：

所以你想使用 AJAX，但同时你又不想使用 AJAX...这很难回答... :) 这个window.location = linkLocation; 仍然会重新加载页面...如果你想实现这一点，你必须阅读更多关于 AJAX 的内容。
如果您对ajax 没有什么经验，请查看jQuery Ajax documentation。很好的例子。您需要调用ajax 来仅从服务器加载div 内容并将其注入div，而不是使用window.location = linkLocation，这会导致您的页面重新加载。
您似乎想更改网址而不重新加载页面？看看这个问题：stackoverflow.com/questions/824349/… 或者看看history.js
感谢大家的意见，我会继续努力的。它仍然不太奏效，但 AJAX 似乎是我必须走的方向。即使我不想:)

标签： javascript php jquery html ajax

【解决方案1】：

代替

window.location = linkLocation;

使用 Ajax 仅重新加载 #content：

$( "#content" ).load(linkLocation, function(){
    $('#content').fadeIn(500, function(){
        // do something when the re-load is finished
    });
});

您不能通过 AJAX 更改窗口的 URL，但可以更改 window.location.hash。其他人（在 cmets 中）提到使用 history API。

【讨论】：

这似乎是正确的方法，感谢您对此添加您的见解。尽管我不希望如此，但 AJAX 似乎是必要的。感谢您的意见。