如何在我的頁面中顯示來自我的請求的數據

Question

所以我一直在為我的投資組合開發一個功能，其中關於我的頁面基本上是一個帶有標簽的“文檔”，當你點擊一個標簽時，與該標簽相關的內容就會出現。 我遇到的問題是我不知道如何從我的 php 文件中獲取數據到我的 html 中。 所以基本上我讓標簽工作，我讓ajax工作它到達php並且php從數據庫中獲取數據但是我不知道如何顯示這些數據。 生病分享我的代碼：

HTML：

    <?php 
include 'includes/header.inc.php'; 

?>
<main>
  <section class="banner">
    <div class="wrapper">
      <article class="about-me">
          <div class="about-box">
            <div class="about-tabs">
                <nav>
                    <ul>
                        <li class="tab-about tab 1"><a href="#">About me</a></li>
                        <li class="tab-work tab 2"><a href="#">Work experience</a></li>
                        <li class="tab-school tab 3"><a href="#">Education</a></li>
                        <li class="tab-other tab 4"><a href="#">Other cetrificates</a></li>
                    </ul>
                </nav>
            </div>
            <div class="about-content">
              <div class="content-welcome">
                <h4>Title</h4>
                <p>Have a look around by clicking on the tabs! </p>
              </div>
              <div class="content-about"></div>
              <div class="content-work"></div>
              <divc class="content-school"></div>
              <div class="content-other"></div>
            </div>
        </div>
      </article>
    </div>
<?php include 'includes/sidebarnav.inc.php'; ?>
<script src="js/abouttabs.js"> </script>
</main>
<?php include 'includes/footer.inc.php'; ?>

Javascript：

$(document).ready(function(){

    let activeTab ='';
    let tabNum = '';
    $(".tab-about").click(function() {
        if (activeTab == '') {
            $(".tab-about").addClass('active');
            activeTab = "about";
            return activeTab;
        } else {
            $(".active").removeClass('active');
            $(".tab-about").addClass('active');
            activeTab = "about";
            return activeTab;
        }
    });
    $(".tab-work").click(function() {
        if (activeTab == '') {
            $(".tab-work").addClass('active');
            activeTab = "work";
            return activeTab;
        } else {
            $(".active").removeClass('active');
            $(".tab-work").addClass('active');
            activeTab = "work";
            return activeTab;
        }
    });
    $(".tab-school").click(function() {

        if (activeTab == '') {
            $(".tab-school").addClass('active');
            activeTab = "school";
            return activeTab;
        } else {
            $(".active").removeClass('active');
            $(".tab-school").addClass('active');
            activeTab = "school";
            return activeTab;
        }
    });
    $(".tab-other").click(function() {
        if (activeTab == '') {
            $(".tab-other").addClass('active');
            activeTab = "other";
            return activeTab;
        } else {
            $(".active").removeClass('active');
            $(".tab-other").addClass('active');
            activeTab = "other";
            return activeTab;
        }
    });

    $('.about-tabs li').click(function(){
       
        switch (activeTab) {
            case 'about':
                tabNum = 1;
                
                break;
            case 'work':
                console.log('work');
                tabNum = 2;
                break;
            case 'school':
                console.log('school');
                tabNum = 3;
                break;
            case 'other':
                console.log('other');
                 tabNum = 4;
                break;
            default:
                console.log('oopsie');
                
                break;
        }
    });
    $('.tab').click(function(){
        let tab = tabNum;


        console.log(tab);
      
        jQuery.ajax({
              url: "testdit.php",
              type : "POST",
              data:{tab:tab},
              success:function(data){
                  
                 
                  console.log(data);
              },
              error: function(error)
              {
                  alert("couldnt be sent" + error); 
              }
          }); 
      });     
   
});

php :

所以這是我的數據庫查詢類：

<?php
require_once 'dbh.class.php';
 class QueryDatabase extends Database {



  public function getData($tablename, $selector, $value) {

    if (!isset($selector)){
        echo 'Something went wrong!';
    } else if ($selector == ''){
      $stmt = $this->connect()->query("SELECT * FROM $tablename");
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){

        return $row;
      }
    }else {
      $stmt = $this->connect()->query("SELECT * FROM $tablename where $selector = $value");
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){

        return $row;
      }
    }
    }


  public function setData($tablename, $colums, $data) {
    if (!isset($tablename) or !isset($data)) {
      echo 'Something went wrong!';
    } else {
      $sql  = "INSERT INTO $tablename";
      $sql .= $colums;
      $sql .= $data;
      $q = $this->connect()->prepare($sql);
      $q->execute();
    }

  }
  protected function changeData() {

  }
  protected function delData() {

  }
}

這是我的關於頁面類：

<?php 

class About {

    public $activeTab = '';
    public $pageData = '';

    public function setTab($tab) {
        $this->activeTab = $tab;
    }
    
    public function getPage() {
        // vraag de content van de tab uit de database
        $getPageContent = new QueryDatabase();
        $this->pageData = $getPageContent->getData('about_page_content','tab',$this->activeTab);
       
        
        
    }   
   
} 

這是我實際處理 ajax 請求的 php 文件：

<?php
  include 'classes\dbh.class.php';
  include 'classes\querydatabase.class.php';
  include 'classes\about.class.php';

$tab = $_POST['tab'];
$try = new About();
$try->setTab($tab);
$try->getPage();
extract($try->pageData, EXTR_PREFIX_SAME, "wddx");

echo $title;


exit;

所以我從提取中獲取數據，例如當我回顯 $title 時，我得到了正確的數據，但我不知道如何在我的關於頁面 html 中使用它

我希望我能正確解釋這一點，我不太確定還能怎么說。

Answer 1

您可以進行以下更新來完成此操作：

為目標提供每個選項卡數據屬性：

<li data-target=".content-about" class="tab-about tab 1"><a href="#">About me</a></li>
<li data-target=".content-work" class="tab-work tab 2"><a href="#">Work experience</a></li>
<li data-target=".content-school" class="tab-school tab 3"><a href="#">Education</a></li>
<li data-target=".content-other" class="tab-other tab 4"><a href="#">Other cetrificates</a></li>

取出div后的隨機C，如下圖：

<divc class="content-school"></div>

對於事件偵聽器，獲取目標此外，您還需要刪除所有點擊處理程序，除了由.tab調用的處理程序。 基本上每個選項卡都有 3 個點擊處理程序，這會把事情搞砸。

$('.tab').click(function(){
  _target = $(this).data("target");
  $('.tab.active').removeClass('active');
  $(this).addClass('active');

在成功函數中引用 _target

$(_target).html(data);