如何通过 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 历史网站，这是一项艰巨的任务，有很多起伏。您需要将状态推送到 window，以便浏览器知道发生了您希望它记录在其历史记录中的更新。

The below explains it.

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

There are a lot of premade scripts out there to try simplify this for you one example below.

http://tkyk.github.io/jquery-history-plugin/ (no longer maintained)

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例子：

<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>

这是使用 jQuery 完成的，以便于使用。

FIDDLE

如何通过 ajax 动态加载具有历史记录的页面

how to load pages dynamically by ajax with history

html

javascript

css

ajax

history.js