AJAX div 问题内的部分加载页面

Question

我正在开发一个播放音乐的网站。由于在浏览整个网站时音乐需要连续播放，所以我使用 AJAX 将内容加载到 div 中，并将播放器保持在另一个 div 中。每当有人播放任何音乐时，播放器页面就会在播放器 div 中加载，并且内容会显示在内容 div 中。现在，当有人在网站中从一个页面导航到另一个页面时，内容 div 会加载另一页面的新内容，播放器 div 保持不变，除非需要播放新音乐。但有时，并非总是在导航到其他页面期间，播放器变得不可用，但音乐仍在后台播放，之后如果我尝试发出新的播放音乐请求，那么前一个和新音频都会继续播放。但是，当我使用 iFrame 而不是 AJAX 执行相同操作时，就没有问题了。我无法弄清楚为什么会出现这些问题，因为我是 AJAX 的新手。

这是导航到另一个页面的代码

   function nextpage(id,type) //this is call when someone clicks a link 
   {

    var URL = "list.php?id="+id+"&t="+type;

      $.ajax({
        url: URL
        }).done(function(data) { 
        $('#content').html(data);
        });
      history.pushState(null,null,URL);
      }

这是点击任意页面任意音乐时调用播放器的函数

     function play(index,type)
      {

       var URL = "player.php?i="+index+"&t="+type;
       $.ajax({
       url: URL
       }).done(function(data) { 
       $('#player').html(data);
       });
     }

这是我所有页面的正文，每个页面都有内容 div 和播放器 div，每个页面的内容都在内容 div[=15 中=]

    //Suppose page1.php
   <div id="content">
     //codes of page1
   </div>
   <div id="player">
   </div>


   //Suppose page2.php
   <div id="content">
     //codes of page2
   </div>
   <div id="player">
   </div>


   //Suppose page3.php
   <div id="content">
     //codes of page3
   </div>
   <div id="player">
   </div>

会不会是每个页面放置内容和播放器div的问题？谁能帮我解决这个问题，因为我是第一次尝试 AJAX。

Answer 1

据我了解你的情况，你越来越困惑

1st 你需要有一个模板，这应该是默认的，当你点击任何 link，它应该更新内容

<html> <!--sample-->
  <body>
    <header>
      <!--menu links page1, page2 , page3, pae 4 ...-->
    </header>
    <div id="content"></div>
    <div id="player"></div>
  </body>
</html>

你的header和播放器div将保持不变，点击link时只有内容div会变成updated/changed。第二你的 js

// ajax to change content
   function nextpage(id,type) //this is call when someone clicks a link 
   {
       // ajax
       $.ajax({
        url: URL
       }).done(function(data) { 
          $('#content').html(data);
          // js code if you have some specific page related, for example
          $('#list').select2();
       });
   }

3 你的内容，页面，你的页面不应该有 id#content div，你的页面将是你想要在内容 div 中显示的内容（音乐列表，艺术家列表等） .将内容 div 视为一个页面，并且您的所有页面都是您想要 display/load 在页面中的内容或数据。

为了更深入的理解，只考虑Whosebug，你的左右各有一栏，中间是内容div，当你打开任何问题时，中间的div随着新内容的变化而变化。

AJAX div 问题内的部分加载页面

AJAX partial loading page inside div problem

jquery

html

ajax

partial-views