PHP 點擊文字觸發後端邏輯：AJAX 非同步載入資料庫/資料表名稱

需求：PHP 從 MySQL 讀取資料庫清單（a、b、c）顯示為連結；使用者點擊某資料庫名稱，頁面不重新整理，以 AJAX 向後端請求該資料庫下的資料表清單並動態顯示。本文示範完整前後端實作。

前端（HTML + jQuery）

<div id="dbList">
    <!-- PHP 迴圈輸出 -->
    <a href="javascript:;" class="db-link" data-db="db_a">db_a</a>
    <a href="javascript:;" class="db-link" data-db="db_b">db_b</a>
    <a href="javascript:;" class="db-link" data-db="db_c">db_c</a>
</div>
<div id="tableList" style="margin-top:20px;"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
    $('.db-link').on('click', function() {
        var dbName = $(this).data('db');
        $('#tableList').html('載入中...');
        $.post('get_tables.php', {db: dbName}, function(html) {
            $('#tableList').html(html);
        });
    });
});
</script>

後端 get_tables.php

<?php
// 簡易示範，實務請用 PDO + Prepared Statement 防 SQL 注入
$host = 'localhost';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dbName = isset($_POST['db']) ? $_POST['db'] : '';
if (!$dbName) { echo '資料庫名稱不可為空'; exit; }

try {
    $pdo = new PDO("mysql:host=$host;charset=$charset", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $pdo->query("SHOW TABLES FROM `$dbName`");
    $tables = $stmt->fetchAll(PDO::FETCH_COLUMN);
    if ($tables) {
        echo '<ul>';
        foreach ($tables as $t) {
            echo "<li>$t</li>";
        }
        echo '</ul>';
    } else {
        echo '該資料庫無資料表';
    }
} catch (PDOException $e) {
    echo '錯誤：' . $e->getMessage();
}
?>

關鍵點總結

• 前端用 data-* 屬性攜帶參數，避免全域變數汙染。
• jQuery $.post 發送 POST 請求，後端用 $_POST 接收。
• 後端直接輸出 HTML 片段，前端 .html() 置換容器內容，無需 JSON 序列化再渲染（簡單場景適用）。
• 生產環境務必加入 CSRF Token、權限驗證、SQL 注入防護。

進階：若需回傳 JSON 由前端渲染

// PHP
header('Content-Type: application/json');
echo json_encode(['tables' => $tables]);

// JS
$.post('get_tables.php', {db: dbName}, function(res) {
    var html = '<ul>' + res.tables.map(t => '<li>'+t+'</li>').join('') + '</ul>';
    $('#tableList').html(html);
}, 'json');

結語

「點擊文字觸發 PHP 邏輯、頁面不跳轉」的本質是 AJAX 非同步請求。掌握前端事件綁定、資料屬性傳參、後端接收與回應三步驟，即可輕鬆實作各類動態載入需求。