基於 jQuery AJAX 實現修改密碼功能：完整前端代碼與接口對接指南

接口規約

// 請求
{ "cmd": "login", "user": "admin", "oldPwd": "admin", "newPwd": "admin" }
// 響應成功
{ "error": { "code": 0, "describtion": "success" } }
// 響應失敗
{ "error": { "code": 1, "describtion": "舊密碼錯誤" } }

HTML 結構（需移除 form 提交屬性）

<input type="text" id="user" placeholder="用戶名">
<input type="password" id="oldPwd" placeholder="舊密碼">
<input type="password" id="newPwd" placeholder="新密碼">
<button id="saveBtn">保存修改</button>

關鍵點：<form> 標籤移除 action、method、onsubmit，按鈕類型設為 type="button" 防止頁面跳轉。

核心 AJAX 代碼

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
    $('#saveBtn').click(function() {
        var user = $('#user').val().trim();
        var oldPwd = $('#oldPwd').val();
        var newPwd = $('#newPwd').val();

        if (!user || !oldPwd || !newPwd) {
            alert('請填寫完整信息');
            return;
        }

        $.ajax({
            type: 'POST',                    // 建議 POST，避免密碼明文出現在 URL 日志
            url: '/api/changePassword',      // 替換為真實接口地址
            data: { cmd: 'login', user: user, oldPwd: oldPwd, newPwd: newPwd },
            dataType: 'json',
            success: function(res) {
                if (res.error && res.error.code === 0) {
                    alert('修改密碼成功！');
                    // 可選：清空輸入框、跳轉登錄頁
                } else {
                    alert('修改失敗：' + (res.error?.describtion || '未知錯誤'));
                }
            },
            error: function(xhr) {
                alert('網絡異常：' + xhr.status);
            }
        });
    });
});
</script>

安全加固建議

• 傳輸層強制 HTTPS。
• 前端不做加密，依賴 TLS；如需雙重保障，可引入 crypto-js 在前端對密碼做 SHA-256 再傳輸，後端再次加鹽哈希存儲。
• 接口增加防暴力破解限流（如同一 IP 5 分鐘內最多 5 次）。