Struts 2.1.6 實戰教程 (6)：重構登入模組整合 jQuery + JSON (AJAX 非同步驗證)

前言

延續系列教程，本篇將登入頁面改為 AJAX 非同步提交，前端使用 jQuery 組裝 JSON 物件，後端 Action 直接解析 JSON 字串並回傳 JSON 結果，無需額外插件，輕量高效。

前端登入頁 (loginform.jsp)

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
    $("#submit").click(function(){
        var loginName = $("input[name='loginName']").val();
        var password = $("input[name='password']").val();
        var jsonUser = {loginName: loginName, password: password};
        var strUser = JSON.stringify(jsonUser); // 關鍵：物件轉 JSON 字串

        $.post("login!valid.action", {json: strUser}, callback, "json");
    });

    function callback(json){
        alert(json.msg);
        if (json.suc == 1) window.location.href = "admin/index.action";
    }
});
</script>
<form action="login.action" method="post">
  帳號<input type="text" name="loginName"/><br/>
  密碼<input type="password" name="password"><br/>
  <input type="button" id="submit" value="登入"/>
</form>

關鍵點解析

• JSON.stringify()：將 JS 物件序列化為 JSON 字串 (需現代瀏覽器或引入 json2.js)
• $.post(url, {json: strUser}, callback, "json")：以 json 為參數名傳遞字串，回調自動解析回傳 JSON
• 按鈕 type="button" 避免表單預設提交

後端 Action (LoginAction.java)

package cn.simple.action;
import org.json.JSONObject; // json.org 官方庫
import cn.simple.manager.UserManager;
import cn.simple.pojo.User;
import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport {
    private String json; // 接收前端傳來的 JSON 字串
    public String getJson() { return json; }
    public void setJson(String json) { this.json = json; }

    public void valid() throws Exception {
        JSONObject jsonObj = new JSONObject(json);
        String loginName = jsonObj.getString("loginName");
        String password = jsonObj.getString("password");

        User user = UserManager.selectUserByLoginName(loginName);
        if (user == null) json = "{suc:0, msg:'用戶名不存在'}";
        else if (!password.equals(user.getPassword())) json = "{suc:0, msg:'密碼不正確!'}";
        else json = "{suc:1, msg:'登入成功!'}";

        sendMsg(json); // 直接寫回響應
    }

    public void sendMsg(String content) throws IOException {
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(content);
    }
}

JSON 庫準備

下載 json.org 官方 Java 類別 (JSONObject.java 等) 放入專案，或打包成 JAR 放入 WEB-INF/lib。輕量無額外依賴。

執行流程圖解

1. 使用者輸入帳密點擊登入按鈕
2. jQuery 組裝 JSON 物件 → stringify → POST 送至 login!valid.action
3. Struts 2 將 json 參數注入 Action 的 setJson()
4. Action 解析 JSON、驗證帳密、構建回應 JSON 字串
5. sendMsg() 直接寫入 HTTP 響應體 (Content-Type 預設 text/plain，前端 dataType="json" 會自動解析)
6. 前端 callback(json) 接收解析後物件，顯示訊息、跳轉

優缺點比較

常見問題

• 中文亂碼：確保 response.setCharacterEncoding("UTF-8")、頁面 charset=UTF-8、資料庫連線 characterEncoding=utf8
• JSON 解析失敗：檢查前端傳輸字串格式、後端 JSONObject 建構是否拋出異常
• 無法進入 Action：確認 struts.xml 或約定式映射 login!valid.action 正確