如何使用ajax和jquery在同一页面上显示多个按钮的输出答案

【问题标题】：How to display output of multiple buttons on same page using ajax and jquery如何使用ajax和jquery在同一页面上显示多个按钮的输出
【发布时间】：2019-11-16 11:51:37
【问题描述】：

我试图在同一页面上显示按钮的输出，谷歌搜索后我意识到使用 jquery/ajax 方法是可能的。我真正想做的可以在这个网站上找到http://iptv-station.com/channels/ 当我们按下任何按钮时，结果会显示在同一页面上。我尝试过使用 ajax 方法，但是当我按下任何按钮时，它会在文件中显示整个项目。我对 ajax 不太了解，因为我对 ajax/jquery 比较陌生。所以我只是根据我的想法调整我的代码。非常感谢任何帮助。这是我尝试过的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "page.txt", success: function(result){
$("#div1").load("page.txt #p1");
$("#div2").load("page.txt #p2");
    }});
  });
});
</script>
<body>

<button>Button1</button><button>Button2</button>
<div id="div1"><h2></h2></div>
<div id="div2"><h2></h2></div>

</body>

in my page.txt
<p id="p1">Button1 content.</p>
<p id="p2">Button2 content.</p>

【问题讨论】：

该网站上的进程不是 ajax 。数据加载在几个不可见的选项卡中，当您单击每个按钮时，旧选项卡将不可见，而新选项卡将对您可见。那你想做什么？你想先使用 ajax 还是存储数据？
感谢您的快速响应。我不想使用 ajax，因为我对它没有足够的了解。您能否详细说明存储数据的工作原理？我想首先使用存储数据来实现此目的。
所以如果你不想使用 ajax ，它只是简单的 jquery tabs 。 Read This
正是我要找的......非常感谢@Abolix

标签： php jquery ajax button

【解决方案1】：

据我了解，当您单击按钮时，您希望在 div 中使用 ajax 获取内容，请查看此示例

  $("#a").on('click', function(e) {
  alert("dd");
$.ajax({
    url:'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', 
    async: false,
          success: function(data){
        alert(data)
           $('#aa').html(data);
        }
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="a">get contenet</button>
<div id="aa"></div>

【讨论】：