jQuery AJAX 表單提交：攜帶隱藏值的按鈕點擊事件完整實現

需求場景

表單提交按鈕點擊時，需攜帶隱藏字段值（如 CSRF Token、業務標識），通過 AJAX 異步提交，並處理加密、載入狀態、響應跳轉等完整流程。

標準實現代碼

// 1. 獲取表單數據（含隱藏字段）
var hideVal = $('#hideVal').val();           // 隱藏業務值
var username = $('#username').val();         // 用戶名
var password = $('#password').val();         // 明文密碼
var publicKey = $('#publicKey').val();       // RSA 公鑰

// 2. 密碼 RSA 加密（使用 JSEncrypt 庫）
var encrypt = new JSEncrypt();
encrypt.setPublicKey(publicKey);
var encryptedPassword = encrypt.encrypt(password);

// 3. 失焦處理（隱藏軟鍵盤、觸發驗證）
$('input').blur();

// 4. AJAX 提交
$.ajax({
    url: '/login.do',
    async: true,           // 異步
    cache: false,          // 禁用緩存
    type: 'POST',          // 請求方式
    dataType: 'json',      // 預期響應類型
    data: {
        username: username,
        password: encryptedPassword,  // 加密後密碼
        hideVal: hideVal              // 隱藏值攜帶
    },
    beforeSend: function() {
        // 載入狀態 UI
        $('.loginbtn').text("登錄中").prop('disabled', true);
    },
    success: function(data) {
        if (data.ret_code === '000') {
            // 登錄成功跳轉
            window.location.href = '/MOA/resources/html/index.html';
        } else {
            // 業務失敗提示
            $.toast(data.ret_msg);
        }
    },
    error: function(xhr, status, error) {
        // 網絡/服務器錯誤
        $.toast('登錄錯誤: ' + error);
    },
    complete: function() {
        // 恢復按鈕狀態
        $('.loginbtn').text("登 錄").prop('disabled', false);
    }
});

HTML 結構配合

<form id="loginForm">
    <input type="hidden" id="hideVal" name="hideVal" value="BUSINESS_FLAG_123" />
    <input type="hidden" id="publicKey" name="publicKey" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA..." />
    
    <div class="form-group">
        <label>用戶名</label>
        <input type="text" id="username" name="username" required />
    </div>
    
    <div class="form-group">
        <label>密碼</label>
        <input type="password" id="password" name="password" required />
    </div>
    
    <button type="button" class="loginbtn" id="btnLogin">登 錄</button>
</form>

<script>
$('#btnLogin').on('click', function() {
    // 上述 AJAX 代碼放這裡
});
</script>

關鍵技術點解析

1. 隱藏值獲取方式

• $('#hideVal').val()：標準 jQuery 取值，適用於 <input type="hidden">
• $('form').serialize()：一鍵序列化整個表單（含隱藏字段），更簡潔

2. 密碼加密最佳實踐

• 前端 RSA 加密非絕對安全，主要防傳輸明文被日誌記錄/抓包竊取
• 必須配合 HTTPS 傳輸加密
• 公鑰可內嵌頁面或動態獲取（防重放攻擊）
• 推薦使用成熟庫：jsencrypt、node-rsa、Web Crypto API

3. AJAX 參數最佳配置

4. 狀態管理模式

// 統一按鈕狀態控制函數
function setButtonLoading($btn, loading) {
    $btn.prop('disabled', loading)
        .text(loading ? '處理中...' : $btn.data('original-text'));
}

// 使用
var $btn = $('.loginbtn').data('original-text', $('.loginbtn').text());
setButtonLoading($btn, true);  // beforeSend
// ...
setButtonLoading($btn, false); // complete

安全增強清單

1. ✅ CSRF Token 雙重驗證（Header + Body）
2. ✅ 密碼輸入框 autocomplete="new-password" 防瀏覽器記憶
3. ✅ 登錄失敗計數 + 驗證碼觸發
4. ✅ 敏感操作日誌記錄（IP、User-Agent、時間）
5. ✅ Content Security Policy (CSP) 防 XSS