如何通過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