如何通过ajax动态加载页面的历史

Question

我正在开发一个音乐播放站点和使用jplayer播放音乐，但问题是我不想停止播放音乐时，新网页加载，所以我想加载所有我的网页与ajax里面的div容器在这种情况下是“＃main-container”，一件重要的事情是我希望在使用ajax加载时不断显示页面URL。这是我目前使用的代码。

<div id="vertical-menu"> 
     <!--<h2 class="logo">LOGO</h2>--> 
     <div class="logo"> 
     <span class="arcd-male97"></span> 
     <h2 class="logo-name">AMR</h2> 
     <h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6> 
     </div> 
       <ul class="menu-items"> 
        <li> 
         <a href="/index.php"><i class="arcd-archive"></i></br>Browse</a>        
        </li> 
        <li> 
         <a href="../Top-albums/Top_albums_Pop.php"><i class="arcd-music97"></i></br>Top albums</a>        
        </li> 
        <li> 
         <a href="../Top-artists/Top_artists_Pop.php"><i class="arcd-microphone52"></i></br>Top artists</a>        
        </li> 
        <li> 
         <a href="../Top-lists/Top_lists_Pop.php"><i class="arcd-numbered8"></i></br>Top lists</a> 
        </li> 
        <li> 
         <a href="../Charts/Charts_Pop.php"><i class="arcd-rising9"></i></br>Charts</a> 
        </li>       
       </ul> 

    </div> 

这是我想播种加载页面内容的div容器。默认情况下，你看到它有一些内容，但我应该用加载页面内容来替换它们。谢谢

<div id="main-container"> <!-- start main container--> 
    <!--start header--> 
    <div class="header_container" id="header_container"> <!--start header div--> 
     <div id="header_titles"> 
      <h1 class="homepage-heading">Browse</h1> 
      <div class="home-page-title"><h2 >select</h2></div> 
      <h2 class="homepage-subheading">GENRES & MOODS</h2> 
     </div> 
    </div> <!--end header div--> 
<!--includes tabnav menu--> 
<?php include ("/includes/tabnav_Browse.php"); ?> 
<ul id="generes-moods_container"> 
      <li style="padding-top: 18.5px;"> 
       <a class="pop" href="#"><i class="arcd-microphone48" ></i>pop</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="country" href="#"><i class="arcd-guitar" ></i>country</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Rock" href="#"><i class="arcd-electric13" ></i>Rock</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Blues" href="#"><i class="arcd-harmonic" ></i>Blues</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="EDM" href="#"><i class="arcd-disc62" ></i>EDM</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Jazz" href="#"><i class="arcd-trumpet12" ></i>Jazz</a> 
      </li> 
      <li style="padding-top: 18.5px;"> 
       <a class="RnB" href="#"><i class="arcd-guitar" ></i>R&B</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Hip_hop" href="#"><i class="arcd-musicplayer1" ></i>Hip hop</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Reggae" href="#"><i class="arcd-guitar" ></i>Reggae</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Classical" href="#"><i class="arcd-violin62" ></i>Classical</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="Folk" href="#"><i class="arcd-guitar92" ></i>Folk</a> 
      </li> 
      <li style="padding-left: 18.2px; padding-top: 18.5px;"> 
       <a class="soul" href="#"><i class="arcd-guitar" ></i>soul</a> 
      </li> 
</ul> 
</div> <!--end main container--> 

Answer 1

这是一个巨大的任务，有很多起起落落使得ajax历史网站从头开始。您需要将状态推送到窗口，以便浏览器知道您希望它在历史记录中记录的更新。

下面解释它。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

有很多预制的脚本在那里，试图简化此为您 下面一个例子。

http://tkyk.github.io/jquery-history-plugin/（不再维护）

https://github.com/cowboy/jquery-hashchange

简单的历史，例如：

if (typeof(window.history.pushState) == 'function') { 
    window.history.pushState(null, path, path); 
} else { 
    window.location.hash = '#!' + path; 
} 

就像我说的，它不是一个简单的事情，一个 “快” 的例子并不容易做到。你需要考虑很多像浏览器类型因素和刷新页面等时如何反应..

jQuery的AJAX更新一个div例如：使用jQuery为便于

<div id="pagediv">Default text in the div.</div> 
<script> 
$(document).ready(function(){ 
    $.ajax({          
     url: '/echo/html/',    
     type: "post", 
     data: { 
      html: "<p>Text echoed back to request</p>", 
      delay: 3 
     },    
     beforeSend: function() { 
      $('#pagediv').html("loading.."); 
      }, 
     success: function(data) { 
      $('#pagediv').html(data); 
      }, 
    }); 
}); 
</script> 

这样做使用。

FIDDLE