AJAX 無刷新提交後更新原頁面 Label：jQuery 與原生 JS 兩種寫法

表單 $.ajax 提交成功，需在原頁面 <label id="msg"> 顯示「提交成功」。核心是成功回調中操作 DOM。

jQuery 寫法 (推薦)

$.ajax({
    url: "form.php",
    type: "POST",
    data: $("#myForm").serialize(),
    success: function(response) {
        $("#msg").html("提交成功");           // 或 .text("提交成功")
        // 若需顯示服務端返回信息
        // $("#msg").html(response.message);
    },
    error: function() {
        $("#msg").html("提交失敗，請重試").css("color", "red");
    }
});

原生 JS (Fetch API)

document.getElementById("myForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    try {
        const resp = await fetch("form.php", { method: "POST", body: formData });
        const result = await resp.json();
        document.getElementById("msg").textContent = result.success ? "提交成功" : "失敗：" + result.error;
    } catch (err) {
        document.getElementById("msg").textContent = "網絡異常：" + err.message;
    }
});

關鍵點

• 阻止默認提交：e.preventDefault() 或 return false，避免頁面跳轉。
• 序列化數據：jQuery .serialize()、原生 FormData 自動處理編碼。
• 服務端協議：約定返回 JSON {success: true, message: ""}，前端統一解析。
• 用戶體驗：提交按鈕置灰 disabled=true、顯示 Loading 狀態、結果自動淡出。

「提交成功後 $(label的id或者class).html('提交成功');」—— 一行代碼搞定 DOM 更新。