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

【问题标题】：AJAX partial loading page inside div problemdiv内的AJAX部分加载页面问题
【发布时间】：2020-01-19 10:07:01
【问题描述】：

我正在开发一个播放音乐的网站。由于在浏览网站时需要连续播放音乐，所以我使用 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 内

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

【问题讨论】：

如果它是重复的，那么是的，这是一个问题，只有一个 div 用于播放器和内容，因为您将内容更新到同一个 div，它会起作用。
是的，你是对的。但是播放器和内容只有一个 div 存在另一个问题。假设我在 page1 中有两个 div，如果有人通过 URL 直接转到 page2，或者如果他们重新加载 page2，那么新的 page2 将在没有播放器和内容的 div 的情况下加载
你要明白一件事，你应该有一个有内容和播放器的页面，页面的变化只是虚拟的，或者你可以为用户说，但实际上它只是改变内容页面但不是页面。如果用户通过 url 打开第 2 页然后从 url 获取参数并将其传递给您的内容函数，如果参数为空则加载第 1 页。
我总共有 7 页显示了不同类型的数据。假设 page1 显示音乐列表，现在如果用户想查看下一个音乐列表，那么内容正在改变但页面相同，那么我可以按照你说的做。但是现在假设 page2 正在显示艺术家列表，现在当用户移动到 page2 时，内容和页面都会更改。我在更改此页面时遇到问题。

标签： jquery html ajax partial-views

【解决方案1】：

据我了解你的情况，你很困惑

首先你需要一个模板，这应该是默认的，当你点击任何链接时，它应该更新内容

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

您的标题和播放器 div 将保持不变，只有内容 div 会在单击链接时更新/更改。第二个你的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();
       });
   }

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

为了更多的理解，只考虑stackoverflow，你有一个在左边和右边的列和中间的内容div，当你打开任何问题时，中间的div会随着新的内容而变化。

【讨论】：

感谢您的回答。我已经改变了以前的方式，现在正在尝试作为我的第二个计划。如果它失败了，那么我应该尝试上面的答案。现在我默认在每个页面中都包含播放器，这样如果用户直接加载任何页面，播放器仍然可用。在更改页面期间，我试图只选择不包括播放器 div 的内容 div，然后我们将再次只有一个内容 div 和初始播放器 div。
是的，您只需要更新或加载来自您页面的内容 div 内的 html。所以内容 div 将永远存在并且只有一个..
能否请您告诉我如何选择其他页面的特定 div 的内容。我做不到。如果我这样做 var URL="mp3.php?id="+id+"&image="+image+"&name="+name+"&index="+i+"&t="+t; $("#content").load(URL+"#content");那么它适用于没有特殊字符的参数，但我的参数包含特殊字符，所以我无法做到。
你可以试试load("mp3.php", {id:22, image:img22, name:'xyz'}) 并使用 POST 来获取值
你可以通过 $(document).ready(function () { $('#content').html(''); } 来解决它，你可以隐藏它们，只在点击时显示它们，或者让它们为空