Javascript OnClick将php文件加载到HTML中

基本上，我的情况如下：

• 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>

FTTB接入

这是我试图包含的代码：

<?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个子选项卡执行该操作将导致一个包含大量重复代码的巨大页面

这就是为什么我宁愿这样做。 按下选项卡时如何加载内容？ 也许有更好的方法来处理这个问题，所以请帮我解决这个问题。

看看这里

基本示例

$.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文件中的值，只需使用方法类型后跟变量名即可<代码>$\u POST['name1']和/或

$\u POST['name2']

---

如果您没有使用jQuery，那么除了使用Fetch（）-API之外，还有一种替代方法。请在此阅读更多信息。

AJAX是您所有问题的答案。好的，我设法解决了这个问题。现在它可以按预期工作了，但是，我希望避免对我需要的每个表使用不同的ajax函数，而是以某种方式使其可重用。是否有任何方法可以将当前选择的选项卡传递到函数中？为什么不使用本机fetch（）-api，而不是包含像jQuery这样的87kb膨胀库来发出ajax请求？^我支持这一点。这里有一个帮助链接：@MagnusEriksson伟大的建议。我只是试着去拿，让它工作了。非常感谢。也许你们中的一位可以帮助我确定在执行此脚本时，如何确定单击了哪个选项卡？