Xajax 實現無刷新二級聯動：PHP 後端與前端 JavaScript 完整範例

Xajax 簡介

Xajax 是 PHP 的 AJAX 庫，自動生成 JavaScript 代理，讓前端直接呼叫後端 PHP 函數，回傳 XML 指令更新 DOM。

資料庫結構

BigType (大分類): ID, BigName
SmallType (小分類): SmallID, BigID, SmallName

三檔案架構

1. xajaxcommon.php (共用註冊)

<?php
require_once("./xajax/xajax_core/xajax.inc.php");
$xajax = new xajax("xajaxserver.php");
$xajax->registerFunction("GetSmallType");

2. xajaxserver.php (後端邏輯)

<?php
define('XAJAX_DEFAULT_CHAR_ENCODING', 'UTF-8');
require("xajaxcommon.php");

function GetSmallType($BigID) {
    $objResponse = new xajaxResponse();
    // 模擬資料庫查詢
    $SmallTypeResult = array(
        array('ID'=>1, 'SmallName'=>'筆記型電腦'),
        array('ID'=>2, 'SmallName'=>'桌上型電腦'),
        array('ID'=>3, 'SmallName'=>'平板電腦'),
    );
    // 實際應用：$pdo->prepare("SELECT * FROM SmallType WHERE BigID=?")->execute([$BigID])->fetchAll()

    $options = "<option value='0'>[請選擇小分類]</option>";
    foreach ($SmallTypeResult as $row) {
        $options .= "<option value='{$row['ID']}'>{$row['SmallName']}</option>";
    }
    $select = "<select name='smalltype' id='smalltype'>$options</select>";

    $objResponse->assign("mdjingdiv", "innerHTML", $select);
    return $objResponse;
}

$xajax->processRequest();

3. chose.php (前端頁面)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>二級聯動示例</title>
    <?php require("xajaxcommon.php"); $xajax->printJavascript("./xajax/"); ?>
</head>
<body>
    <h2>產品分類選擇</h2>
    <select name="bigtype" id="bigtype" onchange="xajax_GetSmallType(this.value);">
        <option value="0">[請選擇大分類]</option>
        <option value="1">電腦</option>
        <option value="2">手機</option>
        <option value="3">週邊</option>
    </select>
    <br><br>
    <div id="mdjingdiv">
        <select name="smalltype" id="smalltype">
            <option value="0">[請先選擇大分類]</option>
        </select>
    </div>
</body>
</html>

關鍵流程解析

1. 用戶變更大分類 → 觸發 onchange → 呼叫 xajax_GetSmallType(value)
2. Xajax JS 代理發送異步請求至 xajaxserver.php
3. PHP GetSmallType() 執行查詢，建立 xajaxResponse
4. assign("mdjingdiv", "innerHTML", $html) 指令回傳
5. 前端 Xajax 引擎解析 XML，執行 document.getElementById('mdjingdiv').innerHTML = ...

改進建議：現代化寫法

Xajax 已停止維護。新專案建議：

• 前端：Vue/React/Alpine.js + fetch()/Axios
• 後端：Laravel/Symfony/API Platform 回傳 JSON
• 範例：

  // Vue 3 + fetch
          async function loadSmallTypes(bigId) {
              const res = await fetch(`/api/small-types?big_id=${bigId}`);
              const data = await res.json();
              this.smallTypes = data;
          }