Bootstrap标签页切换时Ajax调用PHP无响应问题排查与解决

问题场景 #

使用Bootstrap 3.1.1开发带标签页的页面，需求是切换标签时通过Ajax加载对应PHP文件的内容并展示在标签页内。标签页切换功能正常，但Ajax请求始终未触发，浏览器控制台无相关请求记录；测试事件处理器可以正常触发（能输出日志），仅Ajax逻辑未执行。

原代码 #

HTML代码 #

<div class="widget-head-color-box grey-bg">
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li><a class="nav-link active" data-toggle="tab" href="#home" data-file="home.php"> <i class="fa fa-home"></i></a></li>
            <li><a class="nav-link" data-toggle="tab" href="#orders" data-file="orders.php"><i class="fa fa-desktop"></i></a></li>
            <li><a class="nav-link" data-toggle="tab" href="#profil" data-file="profil.php"><i class="fa fa-user"></i></a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane active">
                home
            </div>
            <div id="orders" class="tab-pane">
                orders
            </div>
            <div id="profil" class="tab-pane">
                profil
            </div>
        </div>
    </div>
</div>

jQuery代码 #

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
    e.preventDefault();
    var target = $(e.target).attr('href');
    var targetId = target.substring(1);
    var file = $(e.target).data('file'); // 获取data-file的值

    $.ajax({
        type: 'POST',
        url: file, // 调用对应的PHP文件
        data: { tab: targetId },
        success: function(data) {
            $('#' + targetId).html(data); // 在标签页中展示结果
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });
});

问题原因 #

Bootstrap版本兼容性问题：Bootstrap 3.x系列不支持data-bs-toggle属性，该属性是Bootstrap 4及以上版本才引入的命名空间属性。原jQuery代码中使用data-bs-toggle作为选择器，但HTML中的标签页元素使用的是Bootstrap 3.x的data-toggle属性，导致事件监听器无法绑定到正确的元素上，Ajax逻辑自然不会执行。

解决方案 #

将jQuery代码中的选择器从$('a[data-bs-toggle="tab"]')修改为$('a[data-toggle="tab"]')，匹配Bootstrap 3.x的标签页属性：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    e.preventDefault();
    var target = $(e.target).attr('href');
    var targetId = target.substring(1);
    var file = $(e.target).data('file'); // 获取data-file的值

    $.ajax({
        type: 'POST',
        url: file, // 调用对应的PHP文件
        data: { tab: targetId },
        success: function(data) {
            $('#' + targetId).html(data); // 在标签页中展示结果
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });
});

修改后，切换标签页时即可正常触发Ajax请求，PHP返回的内容会正确加载到对应标签页中。

内容的提问来源于stack exchange，提问作者Willy Mularto