AJAX 無刷新表單提交與聯動下拉選單實戰

情境說明

頁面包含兩個聯動下拉選單（一級分類、二級分類），使用者選擇後點擊「確定」按鈕，需以 AJAX 方式將選擇的值送至後端查詢資料庫，並將結果顯示在頁面下方，同時保持下拉選單的選取狀態不被重置。

關鍵技術點

• 使用 $.ajax() 或原生 XMLHttpRequest 發送非同步請求。
• 表單送出時攔截預設提交行為（event.preventDefault()），避免頁面重載。
• 後端 PHP 接收 POST 參數，查詢資料庫後回傳 HTML 片段。
• 前端將回傳內容填入指定容器（如 <div id="result">）。

前端實作範例 (jQuery)

<form id="searchForm">
  <select name="domain" id="domain">
    <option value="">請選擇</option>
    <option value="1">體育</option>
    <option value="2">藝術</option>
    <option value="3">文史</option>
  </select>
  <select name="items" id="items">
    <option value="">請選擇</option>
  </select>
  <button type="submit" id="submitBtn">確定</button>
</form>
<div id="result"></div>

<script>
// 聯動邏輯
const subOptions = {
  1: [{val:1, txt:"足球"}, {val:2, txt:"籃球"}, {val:3, txt:"乒乓球"}],
  2: [{val:4, txt:"歌唱"}, {val:5, txt:"舞蹈"}, {val:6, txt:"樂器"}],
  3: [{val:7, txt:"小說"}, {val:8, txt:"散文"}, {val:9, txt:"詩詞"}]
};
$("#domain").change(function() {
  const val = $(this).val();
  const $items = $("#items").empty().append('<option value="">請選擇</option>');
  if (subOptions[val]) {
    subOptions[val].forEach(opt => $items.append(`<option value="${opt.val}">${opt.txt}</option>`));
  }
});

// AJAX 提交
$("#searchForm").submit(function(e) {
  e.preventDefault(); // 防止表單預設提交導致頁面重整
  const itemsVal = $("#items").val();
  if (!itemsVal) return alert("請選擇子分類");

  $.ajax({
    url: "search_db.php",
    type: "POST",
    data: { items: itemsVal },
    success: function(resp) {
      $("#result").html(resp);
    },
    error: function() {
      $("#result").html("<span style='color:red'>請求失敗，請稍後再試</span>");
    }
  });
});
</script>

後端 PHP 範例 (search_db.php)

<?php
// 實際專案請使用 PDO 或 MySQLi 防止 SQL 注入
$items = isset($_POST['items']) ? intval($_POST['items']) : 0;
if ($items === 0) {
    echo "未傳入有效的 items 參數";
    exit;
}
// 假設查詢資料庫
// $stmt = $pdo->prepare("SELECT * FROM help_content WHERE category_id = ?");
// $stmt->execute([$items]);
// $rows = $stmt->fetchAll();

// 示範用靜態資料
$demo = [
    1 => "足球相關說明內容...",
    2 => "籃球規則介紹...",
    3 => "乒乓球技巧分享..."
];
echo isset($demo[$items]) ? $demo[$items] : "查無資料";
?>

常見坑點提醒

1. 按鈕型別：務必使用 <button type="submit"> 或 <input type="submit">，並攔截 submit 事件；若改用 type="button"> 則需綁定 click 事件。
2. 下拉選單狀態保持：因為不重整頁面，選單狀態自然保留，無需額外處理。
3. 錯誤處理：前端應處理網路錯誤、後端回傳非 200 狀態碼等情況。

結語

透過 AJAX 非同步提交表單，配合聯動下拉選單，能打造流暢的單頁應用體驗。核心在於「攔截表單預設行為」與「前後端資料格式約定」。