OnClick 加載 php 文件到 HTML

Question

基本上，這就是我所擁有的：

• 2個主要標簽；
• 1 個主選項卡有 4 個子選項卡；
• 每個選項卡都需要在選擇時加載代碼。

這是Nav代碼：

<div class="container-fluid mt-3">
    <ul class="nav nav-pills justify-content-center" id="tab-city" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="city-dr" data-toggle="tab" href="#droh" role="tab" aria-controls="droh" aria-selected="true">Drohobych</a>
        </li>
    </ul>

    <div class="tab-content" id="city-content">
        <div class="tab-pane show active" id="droh" role="tabpanel" aria-labelledby="city-dr">
            <ul class="nav nav-pills justify-content-center" id="table-content" role="tablist">
                <li class="nav-item mt-2">
                    <a class="nav-link active" id="droh-repair" data-toggle="tab" href="#droh-repairs" role="tab" aria-controls="droh-repairs" aria-selected="true">Repair</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" id="table-dr-fttb-pull-in" role="tab">FTTB Pull In</a>
                </li>
            </ul>

            <div class="tab-content" id="table-content">
                <div class="tab-pane show active" id="droh-repairs" role="tabpanel" aria-labelledby="city-dr">
                    <?php
                    include(__DIR__ . '/tables/dr/table_dr_repair.php');
                    ?>
                </div>
            </div>
        </div>
     </div>
</div>

這是我試圖包含的代碼：

<?php
require_once(__DIR__ . '/../../headers/navbar.php');
require_once(__DIR__ . '/../../../db/db_handler.php');
require_once(__DIR__ . '/../../../util/constants.php');
require_once(__DIR__ . '/../../../util/util.php');
?>

<table class="table table-bordered table-hover table-sm">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Street</th>
        <th scope="col">Phone</th>
        <th scope="col">Date</th>
        <th scope="col">Price</th>
        <th scope="col">Comment</th>
        <th scope="col">Operator</th>
    </tr>
    </thead>

    <?php
    $stmt = $connection->prepare("SELECT * FROM `" . Tables::$table_dr_fttb_pull_in . "` ORDER BY `date` DESC");
    $stmt->execute();
    $result = $stmt->get_result();


    while ($row = $result->fetch_array()) {
        print_task_details_as_table_row($row);
    }
    ?>

</table>

問題是 - 選擇選項卡時沒有任何反應。 我能做什么 - 只需從文件中獲取所有代碼並將其插入 HTML 頁面。 但是，我並不是真正喜歡該解決方案，因為對另外 7 個子選項卡執行此操作將導致一個包含大量重復代碼的巨大頁面。

這就是為什么我寧願這樣做。 按下選項卡時如何加載內容？ 也許有更好的方法來處理這個問題，所以請幫我解決這個問題。

Answer 1

看看這里...

https://api.jquery.com/jquery.ajax/

基本示例

$.ajax({
  method: "POST",
  url: "/path/to/file",
  success: function(data){
   console.log(data);
 }
});

如果您嘗試提交表單，只需添加一個 AJAX 數據字段...

var input1 = $('#input1').val();
var input2 = $('#input2').val();
$.ajax({
  method: "POST", //Method either GET or POST
  url: "/path/to/file.php", //Enter path to PHP file
  data: {
    "name1": input1, //Defining POST variables.
    "name2": input2
  },
  success: function(data){
   console.log(data); //Outputs data to the console
  }
)};

要檢索 php 文件中的值，只需使用您的方法類型后跟變量名即可。 $_POST['name1']和/或$_POST['name2']

如果您不使用 jQuery，則可以使用 Fetch()-API 的替代方法。 在這里閱讀更多https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 。