AJAX 請求數據返回但頁面未更新？排查前後端交互常見問題

在 Web 開發中，常遇到 AJAX 請求成功返回數據，但前端頁面卻未按預期更新的情況。這篇文章將通過一個實際案例，分析可能的原因並提供解決方案。

問題場景

開發者在 JSP 頁面中編寫了一個簡單的 AJAX 請求：當用戶選擇「銷售部門」下拉框時，觸發 xiaoshou() 函數，向後端發送請求獲取對應的銷售人員列表，並動態填充到另一個下拉框中。

<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
function xiaoshou(){
    var suoshubumen = document.getElementById("find").value;
    console.info(suoshubumen);
    $.ajax({
        url: "crmuserAction!findBySuoshubumen.action?suoshubumen=" + suoshubumen,
        type: "post",
        dataType: 'json',
        success: function(r){
            for(var i = 0; i < r.length; i++){
                $("#ych").append("<option value='" + r[i].name + "'>" + r[i].name + "</option>");
            }
        },
        error: function(){
            console.info("error");
        }
    });
}
</script>
<div>
    <form>
        <table cellpadding="5" cellspacing="5">
            <tr>
                <td colspan="6">銷售部門：</td>
                <td>
                    <select id="find" onchange="xiaoshou(this.value)">
                        <option></option>
                        <option id="zhuguan" value="銷售部主管">銷售部主管</option>
                        <option id="guwen1" value="顧問1部">顧問1部</option>
                        <option id="guwen2" value="顧問2部">顧問2部</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="6">銷售人員：</td>
                <td class="start" style="200px">
                    <select id="ych" name="name"></select>
                </td>
            </tr>
        </table>
    </form>
</div>

開發者表示數據已經返回，但頁面無反應。經排查，前端 JSP 代碼邏輯基本正確，問題多半出在後端 Action 的返回數據格式或處理方式上。

核心問題分析

1. 數據格式不匹配：前端指定 dataType: 'json'，要求後端返回標準 JSON 陣列。若後端返回的是字符串、HTML 片段或非標準 JSON，解析會失敗，導致 success 回調不執行或報錯。
2. 後端未正確序列化：Struts 2 或 Spring MVC 若未正確配置 JSON 序列化（如缺少 Jackson 依賴、未加 @ResponseBody 註解），可能導致返回非預期格式。
3. 字符編碼問題：中文參數傳遞若未統一 UTF-8 編碼，可能導致後端查詢不到數據，返回空列表。

解決方案：Spring MVC 返回 JSON 列表示例

以下是一個標準的 Spring MVC 控制器方法，正確返回 List<Person> 並自動序列化為 JSON：

@RequestMapping(value = "/getList")
@ResponseBody
public List<Person> getList(String suoshubumen) {
    List<Person> list = new ArrayList<>();
    if ("銷售部主管".equals(suoshubumen)) {
        list.add(new Person("z1", "1"));
        list.add(new Person("z2", "1"));
        list.add(new Person("z3", "1"));
        list.add(new Person("z4", "1"));
    } else if ("顧問1部".equals(suoshubumen)) {
        list.add(new Person("w1", "1"));
        list.add(new Person("w2", "1"));
        list.add(new Person("w3", "1"));
        list.add(new Person("w4", "1"));
    } else {
        list.add(new Person("r1", "1"));
        list.add(new Person("r2", "1"));
        list.add(new Person("r3", "1"));
        list.add(new Person("r4", "1"));
    }
    return list;
}

關鍵點：

• 方法上添加 @ResponseBody，告訴 Spring 直接將返回對象寫入 HTTP 響應體。
• 確保項目中包含 Jackson 依賴（jackson-databind），Spring MVC 會自動將 List 序列化為 JSON 陣列：[{"name":"z1"}, ...]。
• 前端 success 回調中的 r 即為該 JSON 陣列，可直接遍歷。

調試建議

1. 打開瀏覽器開發者工具（F12），切換到 Network 面板，查看該 AJAX 請求的 Response 內容是否為合法 JSON。
2. 在 success 回調首行加 console.log(r)，觀察數據結構。
3. 若 Response 為空或報錯，檢查後端控制台是否有異常堆疊信息。

總結：前端代碼邏輯清晰，關鍵在於後端必須返回標準 JSON 陣列，並確保編碼一致。採用 Spring MVC + @ResponseBody 是解決此類問題的最佳實踐之一。