jQuery AJAX 三大核心方法實戰：load / $.post / $.ajax 與 Struts2 整合

jQuery AJAX 三大核心方法實戰：load / $.post / $.ajax 與 Struts2 整合

AJAX 實現局部刷新，jQuery 封裝瀏覽器差異，提供統一 API。本文演示三種核心方法及 Struts2 JSON 整合。

環境準備

<script src="${basePath}/js/jquery-1.8.3.min.js"></script>
<!-- basePath 定義 -->
<% String path = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
   pageContext.setAttribute("basePath", path); %>

一、$(selector).load(url, data, callback) —— 最簡單

<script>
$(function(){
    $(":button").click(function(){
        $("#time").load("${basePath}/timeServlet"); // GET，無參數
    });
});
</script>
<span id="time"></span> <input type="button" value="獲取時間">

Servlet 返回純文本：

PrintWriter pw = response.getWriter();
pw.println(new SimpleDateFormat("HH:mm:ss").format(new Date()));

• 無 data 參數 → GET 請求。
• 有 data → POST 請求。
• 返回內容直接作為 HTML 填充目標元素。

二、$.post(url, data, success, dataType) —— 表單提交首選

$.post("${basePath}/userServlet", 
    {username: $(":text").val(), password: $(":password").val()},
    function(data, status, jqXHR) {
        // data: 響應文本 (純字符串)
        $("img").attr("src", "${basePath}" + data);
    }
);

jqXHR 關鍵屬性：status(HTTP狀態碼)、readyState、responseText、statusText。

三、$.ajax(options) —— 完全控制

$.ajax({
    type: "POST",
    url: "${basePath}/user_login.action", // Struts2 action
    data: $("form").serialize(),          // 自動序列化表單
    success: function(result) {
        // result 為 JSON 對象 {src: "/images/ok.ico"}
        $("img").attr("src", "${basePath}" + result.src);
    }
});

四、Struts2 整合 JSON 返回

1. 依賴：struts2-json-plugin.jar
2. struts.xml 配置：

<package name="user-action" namespace="/" extends="json-default">
    <action name="user_login" class="top.bwcx.ajax.user.UserAction">
        <result type="json" /> <!-- 自動序列化 Action 屬性為 JSON -->
    </action>
</package>

public class UserAction extends ActionSupport {
    private User user;        // 接收表單數據 (user.username, user.password)
    private String src;       // 返回圖片路徑

    public String execute() {
        user = userDao.findByUsernameAndPassword(user.getUsername(), user.getPassword());
        src = (user == null) ? "/images/icon/delete.ico" : "/images/icon/ok.ico";
        return SUCCESS;
    }
    // getter/setter 必須齊全：getUser/setUser, getSrc
}

• 表單字段名 user.username 對應 setUser(User)，Struts2 OGNL 自動注入。
• getSrc() 返回值自動序列化為 JSON {"src":"/images/..."}。

五、原生 Servlet vs Struts2 AJAX 對比

六、表單序列化技巧

<form>
  <input name="user.username" type="text"/>
  <input name="user.password" type="password"/>
</form>

var params = $("form").serialize(); // "user.username=abc&user.password=123"
$.post(url, params, ...);

serialize() 要求輸入框有 name 屬性，自動處理編碼與特殊字符轉義。

七、常見坑點

• Struts2 action 後綴：struts.action.extension=action，URL 必須以 .action 結尾。
• JSON 返回亂碼：確保 <result type="json"> 且 Action getter 正確，檢查 web.xml 編碼過濾器。
• 跨域：開發環境配置 Access-Control-Allow-Origin 或代理轉發。

掌握三大方法，AJAX 交互隨心所欲。

1. 上一篇文章： Log4j 2.x 配置大全：從入門到高級多輸出、異步、郵件、數據庫、自定義 Appender
2. 下一篇文章： MySQL + Hibernate：實體字段與關鍵字衝突的優雅解法——反引號轉義

Java 綜合教學

JSP 留言板雛形實現：添加與顯示留言

JSP 留言板雛形 實現簡單留言簿，包含發布頁面與顯示頁面。

Windows 搭建 PXE 環境批量部署 RedHat 6 完整教學（tftpd64 + Xlight FTP）

Windows 搭建 PXE 環境批量部署 RedHat 6

Java 本地事務深度解析：JDBC 事務機制、MySQL 存儲過程對比與代碼實戰

事務分類與本地事務定義 本地事務：單一資源（單個 Data

CNodeJS 社區論壇實戰（三）：發表話題頁面實現

CNodeJS 社區論壇實戰（三）：發表話題頁面實現 本文記