Java 異步登錄實戰：Servlet + AJAX + EasyUI 完整範例

架構說明

前端採用 EasyUI Dialog 表單，jQuery AJAX 非同步提交至 LoginServletAjax，後端驗證成功返回 JSON 包含用戶資訊，失敗返回錯誤訊息。

後端 Servlet 核心代碼

@WebServlet("/LoginServletAjax")
public class LoginServletAjax extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=UTF-8");
        if ("POST".equalsIgnoreCase(req.getMethod())) doLoginAjax(req, resp);
    }

    private void doLoginAjax(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        PrintWriter out = resp.getWriter();

        AdminUser user = new AdminUserDao().queryUser(username, password);
        if (user != null) {
            String json = JSONObject.fromObject(user).toString();
            out.print("{\"Msg\":\"登錄成功！\",\"rows\":" + json + "}");
        } else {
            out.print("{\"Msg\":\"用戶名或密碼錯誤！\"}");
        }
        out.flush();
    }
}

前端頁面關鍵片段

<script>
function ajaxFrm() {
    $.ajax({
        url: '../LoginServletAjax',
        type: 'POST',
        data: $('#form1').serialize(),
        dataType: 'json',
        success: function(data) {
            $.messager.alert("提示", data.Msg);
            if (data.rows) {
                $('#LoginList').html("用戶名:" + data.rows.username + "--密碼：" + data.rows.password);
            }
        },
        error: function(err) { console.error(err); }
    });
}
</script>

<div id="LoginAdd">
    <form id="form1" method="post">
        <table>
            <tr><td>用戶名：</td><td><input id="username" name="username" class="easyui-validatebox"></td></tr>
            <tr><td>密碼：</td><td><input id="password" name="password" type="password" class="easyui-validatebox"></td></tr>
        </table>
    </form>
</div>
<div id="LoginList">用戶信息加載中...</div>

關鍵點提醒

• Servlet 返回 application/json 而非 text/html，前端 dataType: 'json' 才能自動解析。
• 密碼傳輸建議加密（如 RSA 或 HTTPS），生產環境切勿明文傳輸。
• EasyUI $.messager.alert 提供友好提示體驗。