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

【问题标题】：Load the PHP contents only after switching a nav tab仅在切换导航选项卡后加载 PHP 内容
【发布时间】：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 代码添加到数组中？你能给我举个例子吗？

标签： javascript php jquery ajax

【解决方案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()它或者，您需要找到其他隐藏/保护页面/数据的方法。