仅在切换导航选项卡后加载 PHP 内容

Posted 2023-05-08

技术标签:

【中文标题】仅在切换导航选项卡后加载 PHP 内容【英文标题】：Load the PHP contents only after switching a nav tab 【发布时间】：2022-01-07 01:22:56 【问题描述】：

我的项目中有 10 个选项卡，每个选项卡都将使用 php 从 API 获取一些值。每次加载页面需要 10-15 秒（因为它会更新所有 10 个选项卡的值）

如何仅在切换标签后加载内容？

在开始时加载 TAB1，然后仅在单击 TAB2 或 TAB3 后 然后加载它们的内容，但不要在开始时加载它们

示例： https://jsfiddle.net/t52mwLoc/

<div class="col-md-6">
    <div class="card">
    <div class="card-body">

    <h4 class="card-title">Default Tab</h4>
                          
                          
                                                <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">

      <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
      
      <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
                            
      <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li>
                            
    </ul>

<!-- Tabs -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active show" id="tab1" role="tabpanel">
<div class="p-20">
Load this content... [TAB1]
</div>
</div>
<div class="tab-pane  p-20" id="tab2" role="tabpanel">some PHP... Load this ONLY after clicking [TAB2]</div>
<div class="tab-pane p-20" id="tab3" role="tabpanel">some PHP... Load this ONLY after clicking [TAB3]</div>
</div>
</div>
</div>
</div>
                    
                    
                    
                    
                    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

【问题讨论】：

您可以通过将每个选项卡的内容放在其自己的 URL 端点下来实现此目的。然后，您可以在单击选项卡时挂钩show.bs.tab 事件，以发出 AJAX 请求以加载内容。每个选项卡都应该是它自己的页面，如果你想让它看起来像@RoryMcCrossan 建议的那样，它的所有页面都可以做这样的？ pastebin.com/raw/fbTpEu15 我是否将我的 PHP 代码添加到数组中？你能给我举个例子吗？ 【参考方案1】：

您可以做的一些简单的事情就是这样。实例here

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    function initialLoad()
      $('#loader').load("page1.php");
    
    </script>
</head>
<body onload="initialLoad()">
  Click on buttons to load different pages <br/>

  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(1)"> Page 1 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(2)"> Page 2 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(3)"> Page 3 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(4)"> Page 4 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(5)"> Page 5 </button><br/><br/>

  <div class="load" id="loader">
  </div>
  <h3>You can check the network tab to see which page is getting loaded</h3>

  <script>
  function load(page)
    var thePage = "page"+page+".php"
    $('#loader').load(thePage);//assuming u have page1.php page2.php like this
  
  </script>
</body>
</html>

如有任何疑问，请发表评论。

【讨论】：

一个问题，如何防止用户导航/访问.php文件的完整URL路径？例如，不允许用户访问这些； page1.php - page2.php 因为我用的是xhr，我觉得不太可能，每一个请求都是按照URL来的，如果你屏蔽一个直接的URL，你将无法load()它或者，您需要找到其他隐藏/保护页面/数据的方法。

以上是关于仅在切换导航选项卡后加载 PHP 内容的主要内容，如果未能解决你的问题，请参考以下文章

使用 Bootstrap 4 在主活动选项卡错误中加载选项卡内容 - PHP

如何刷新未显示的选项卡

在 TabBarController 中的选项卡之间切换/导航

引导、导航选项卡、下拉菜单；如何根据 URI 设置活动选项卡

引导导航选项卡未加载正确的页面

选项卡不会以编程方式切换导航控制器内的 tabBar