jQuery AJAX 實現無刷新驗證卡券：正確 POST 參數傳遞與回顯

前端需在輸入框失去焦點或點擊按鈕時，以 AJAX 向後台驗證卡券代碼，並將結果即時顯示在提示區域。關鍵在於 正確序列化 POST 資料、指定 dataType: json、處理回應並更新 DOM。

修正後的前端代碼

<div class="contact-input">
    <label>兌換碼</label><br>
    <input type="text" name="codeno" id="codeno" />
    <input type="button" id="btnVerify" value="驗證" />
    <div id="checkResult"></div>
</div>

<script>
$(function() {
    $("#btnVerify").click(function() {
        var code = $("#codeno").val().trim();
        if (!code) { $("#checkResult").text("請輸入兌換碼"); return; }
        
        $.ajax({
            url: "checkCard.php",
            type: "POST",
            data: { codeno: code }, // 物件格式，jQuery 自動序列化為 application/x-www-form-urlencoded
            dataType: "json",       // 預期回應 JSON，自動解析
            success: function(resp) {
                if (resp.success) {
                    $("#checkResult").html("<span style='color:green'>" + resp.msg + "</span>");
                } else {
                    $("#checkResult").html("<span style='color:red'>" + resp.msg + "</span>");
                }
            },
            error: function(xhr, status, err) {
                $("#checkResult").text("請求失敗：" + err);
            }
        });
    });
    
    // 失去焦點自動驗證（可選）
    $("#codeno").blur(function() {
        if ($(this).val().trim()) $("#btnVerify").click();
    });
});
</script>

後端 PHP 範例

<?php
header('Content-Type: application/json; charset=utf-8');
$code = isset($_POST['codeno']) ? trim($_POST['codeno']) : '';

if (!$code) {
    echo json_encode(['success' => false, 'msg' => '參數缺失']);
    exit;
}

// 模擬驗證邏輯
$valid = ($code === 'VALID123'); // 實際查資料庫
echo json_encode([
    'success' => $valid,
    'msg' => $valid ? '驗證通過，卡券有效' : '卡券代碼無效或已過期'
]);
?>

常見錯誤與修正

進階建議

• 加入防抖：連續輸入時延遲 300ms 發請求，減少伺服器壓力。
• 驗證碼/限流：防止惡意遍歷卡券代碼。
• 統一錯誤碼：前後端約定 {code: 200, data:..., msg:...} 格式。

遵循標準 AJAX 參數傳遞與 JSON 回應格式，能快速構建穩定的無刷新驗證功能。