是否可以在單擊時刷新選項卡 - 引導選項卡

Question

我創建了兩個選項卡，使用PHP選項卡，一個用於將數據插入數據庫，另一個用於查看數據庫中的數據，有人建議 ajax，但我找不到我想要的答案。

示例代碼 -

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>

  </ul>

  <div class="tab-content">

    <div id="home" class="container tab-pane active">
   <?php require("insert.php"); ?>
    </div>
    <div id="menu1" class="container tab-pane fade">
     <?php require("view.php"); ?>
    </div>
    
  </div>

在標簽一，我插入數據（PHP）和標簽二我查看表中的數據（PHP），所以插入后，我必須刷新整個頁面才能查看標簽二上的更新數據。

那么是否可以在我在標簽二上插入數據后立即刷新標簽二，這樣我就可以在不刷新整個頁面的情況下查看更新的數據？ 如果這已經解決，請評論答案鏈接。

Answer 1

它可能看起來很粗糙，但我使用 JavaScript 使它工作。

$(document).ready(function(){
    
$(".t1").load("insert.php");
$(".t2").load("view.php");

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  
  if(target=='#home')
  {
  $(".t1").load("insert.php");
  }
  else if(target=='#profile')
  {
  $(".t2").load("view.php");
  }
});

});

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
    </li>

  </ul>

  <div class="tab-content">

    <div id="home" class="container tab-pane active t1">
   
    </div>
    <div id="profile" class="container tab-pane fade t2">
     
    </div>
    
  </div>