使用 AJAX 在动态引导选项卡中加载动态内容答案

【问题标题】：Use AJAX to load dynamic content in dynamic bootstrap tabs使用 AJAX 在动态引导选项卡中加载动态内容
【发布时间】：2020-01-24 20:32:55
【问题描述】：

我已经非常努力地做到这一点，但无法让它发挥作用。我基本上需要使用 jquery（来自 bootstrap 文档）获取当前 bootstrap 4 选项卡的名称/ID，并将其传递给 PHP 变量，然后在 MySQL WHERE 子句中使用以确定该选项卡要显示的数据。

这是我目前的代码：

 <script>
        $(document).ready(function(){
            $('.nav-tabs a').on('click', function (e) {
                e.preventDefault()
                $(this).tab('show')
              })
            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
            {
                var x = $(e.target).text();
                console.log(x);
                $(".act span").text(x);

                $.ajax({
                type: 'post',
                url:'contacts_1.php',
                data:{'activeTab' : x},
                success:function(result){
                    $('body').html(result);
                }
                });
            });
       });
</script>

然后在页面顶部，我尝试像这样访问变量 -

<?php
if( isset($_POST['activeTab']))
{
    $currenttab = $_POST['activeTab'];
    echo $currenttab;
}
?>

** 更新 - 我现在可以使用标签（更新我的代码）（尽管我无法让标签保持“活动” - 这是另一个问题）。但是，当我在我的 php 页面顶部获取我发布的变量时，我无法在我的 WHERE 子句中进一步使用它。我收到错误“未定义的变量”。有什么帮助吗？

下面是我的php页面代码-

<?php

if( isset($_POST['activeTab'])){
            $currenttab = $_POST['activeTab'];
            echo $currenttab;
        }
?>
<!DOCTYPE html>
<html>
   <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


   *some other html here just displaying a photo*

       <ul class='nav nav-tabs'>    

       <?php
        include('connect.php');

        $tabs = "SELECT DISTINCT tab FROM table";

        $result = oci_parse($conn, $tabs);
        oci_execute($result);

        while (($row = oci_fetch_assoc($result)) != false) {
            $area = $row['TAB'];
            $output = '';
            $output03= '';

            echo " <li class='nav-item'>
                        <a class='nav-link' id='home-tab' data-toggle='tab' href='#" .$area. "' role='tab' aria-controls='home' aria-selected='true'>$area</a>
                   </li>";

             $output .= "<div class='tab-pane fade show active' id='" .$area. "' role='tabpanel' aria-labelledby='home-tab'>";

             $output03 .= '</div>';
        }

        ?>     

         </ul>         

        <div class='tab-content mt-4'>
        <div class='row'>

      <?php

        echo $output;

        $query = "SELECT field1, field2, ...     
                FROM table1, table2,....
                WHERE ... = ... AND
                     TAB = '$currenttab'";

        $stid = oci_parse($conn, $query);
        oci_execute($stid);

        while (($row = oci_fetch_assoc($stid)) != false) {
            $name = $row['EMPNAME'];
            $emprole = $row['ROLE'];
            $empext = $row['EXTENSION'];

            echo "<br>
               <div class='col-md-4'>
                 <div class='card' style='width: 18rem;'>
                   <img class='card-img-top' src='img_avatar.png' alt='Card image cap'>
                    <div class='card-body text-centered'>
                     <a data-toggle='collapse' href='#moreinfo1' role='button' aria-expanded='false' aria-controls='collapseExample'>
                        <h5 class='card-title'>$name</h5>
                      </a>

                 <p class='card-text'><i class='fa fa-fw fa-user'></i>$emprole</p>
                                        <hr>
                 <p class='card-text'><i class='fa fa-fw fa-phone'></i>$empext</p>
                </div>
               </div>
             </div> ";
        }

        echo $output03;

        ?>

</div>
       <script>
        $(document).ready(function(){
            $('.nav-tabs a').on('click', function (e) {
                e.preventDefault()
                $(this).tab('show')
              })
            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
            {
                var x = $(e.target).text();
                console.log(x);
                $(".act span").text(x);

                $.ajax({
                type: 'post',
                url:'contacts_1.php',
                data:{'activeTab' : x},
                success:function(result){
                    $('body').html(result);
                }

                });
            });
       });
        </script>
    </body>
</html>

【问题讨论】：

这不是和你几个小时前问的另一个问题一样吗？ stackoverflow.com/questions/59877058/…
不应该去掉引号吗？ data:{activeTab: x},
与我的问题类似但不一样已经变得更具体了。你有答案吗？ @Dilek
我一开始就没有引号，但它没有用，但后来在这里看到另一个答案，你应该有引号，它对这个人有用，哈哈 - 两种方式都不起作用:(谢谢@kerbholz
@kerbholz 对象键上的引号无关紧要。无论有无，都会产生相同的对象。

标签： javascript php jquery ajax bootstrap-4

【解决方案1】：

试试

 <script>
    $(document).ready(function(){
        $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e)
        {
            var x = $(e.target).text();
            console.log(x);

            $.ajax({
                url: 'contacts_1.php',
                type: 'post',
                 data:{'activeTab' : x},
                datatype: 'html',
                success: function (rsp, status, jqXHR) 
                {
                     $('.tab-content').html(rsp);
                }
            });
        });
    });
</script>

要在声明事件侦听器后创建的元素上捕获事件 - 您应该绑定到父元素或层次结构中更高的元素。

PHP 代码：

<?php
if( isset($_POST['activeTab']))
{
    $currenttab = $_POST['activeTab'];
    ?>

          <?php
            $query = "SELECT field1, field2, ... FROM table1, table2,.... WHERE ... = ... AND TAB = '$currenttab'";
            $stid = oci_parse($conn, $query);
            oci_execute($stid);
            while (($row = oci_fetch_assoc($stid)) != false) {
                $name = $row['EMPNAME'];
                $emprole = $row['ROLE'];
                $empext = $row['EXTENSION'];

               ?>
                <div class='col-md-4'>
                     <div class='card' style='width: 18rem;'>
                       <img class='card-img-top' src='img_avatar.png' alt='Card image cap'>
                       <div class='card-body text-centered'>
                            <h5 class='card-title'><?php echo $name ?></h5>
                            <p class='card-text'><i class='fa fa-fw fa-user'></i><?php echo $emprole ?></p>
                            <hr>
                        <p class='card-text'><i class='fa fa-fw fa-phone'></i><?php echo $empext ?></p>
                      </div>
                   </div>
                </div>
                <?php
            }
            ?>

    <?php
}
?>

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。
非常感谢。只是想知道..如果我要使用多个页面，那么使用 php 可以吗？就像标签链接到一个实际的单独页面一样？