Question

我正在尝试使用php mysql在引导程序选项卡中动态加载数据。

 <ul class="nav nav-tabs " role="tablist">
<li class="active col-md-3"><a data-toggle="tab" href="#home">Notes</a></li>
<li class="col-md-3"><a data-toggle="tab"  href="#menu1">Question Bank</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu2">Summary</a></li>
<li class="col-md-3"><a data-toggle="tab"  href="#menu3">Videos</a></li>
 </ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
    </div>
</div>

现在问题是

1.点击标签时激活标签 2.使用db中的ajax / jquery为每个选项卡加载数据

例如。在第一个标签'主页'我正在使用此查询

select c.title,c.description,c.content_url 
from content_ref_table c inner join  course_ref_table  cf on    c.course_id =cf.course_id 
 where c.title like '%eco%' and cf.courses = 'b.com'

所有数据都将在div中获取，这个问题的解决方案是什么

Answer 1

请尝试：

<ul class="nav nav-tabs " role="tablist">
        <li class="active col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('home');"  href="#home">Notes</a></li>
        <li class="col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('menu1');"  href="#menu1">Question Bank</a></li>
        <li class="col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('menu2');" href="#menu2">Summary</a></li>
        <li class="col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('menu3');" href="#menu3">Videos</a></li>
    </ul>

你的回答div。

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
    </div>
</div>

请为ajax请求写jquery。

<script>
            function GetDataFromDB(tab_type){
            $.post("ajax_page.php",
            {
                tab_type: tab_type
            },
            function(data, status){
                data = JSON.parse(data);
                $('#home').html(data);
            });
        }
</script>

为ajax responce创建ajax_page.php文件。

$servername = "localhost";
$username   = "username";
$password   = "password";
$dbname     = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
    die("Connection failed: ".$conn->connect_error);
}

if ($_POST['tab_type'] == 'home')
{

    $sql    = "select c.title,c.description,c.content_url
    from content_ref_table c inner join  course_ref_table  cf on    c.course_id =cf.course_id
     where c.title like '%eco%' and cf.courses = 'b.com'";
    $result = $conn->query($sql);

    $jsonData = [];
    if ($result->num_rows > 0)
    {
        // output data of each row
        while ($row = $result->fetch_assoc()) {
            $jsonData[] = $row;
        }
    }

    echo json_encode($jsonData);
} else if ($_POST['tab_type'] == 'menu1')
{

}
$conn->close();

在php mysql的bootstrap选项卡中使用ajax调用加载数据

1 个答案: