jQuery AJAX 後台資料無法顯示在頁面的常見原因與修正

使用 jQuery $.post 向後台請求資料後，若前端頁面未正確更新，通常是選取器寫錯、DOM 元素未就緒、或資料綁定方式不當造成。

問題程式碼分析

<script>
$(function(){
    $.post("${ctx}/user/saveSession.do", function(data) {
        $("username").text(data.name);  // 錯誤：缺少 # 號
    });
});
</script>

<li id="username" name="username"><a href="#">顯示在這裡 </a></li>

核心錯誤

• $("username") 是標籤選取器，尋找 <username> 元素，但頁面中是 id="username"，應使用 ID 選取器 $("#username")。
• <li> 元素內含 <a> 標籤，直接 .text() 會覆蓋掉超連結，建議在 <li> 內加入獨立 <span> 承載文字。

修正後的完整範例

<li id="username"><a href="#"><span id="userNameSpan">顯示在這裡</span></a></li>

<script>
$(function(){
    $.post("${ctx}/user/saveSession.do", function(data) {
        // 確保 data.name 存在，且使用正確選取器
        if (data && data.name) {
            $("#userNameSpan").text(data.name);
        }
    });
});
</script>

進階排查清單

1. 瀏覽器開發者工具 Network 頁籤：確認請求是否發出、回應狀態碼 200、回傳 JSON 格式正確。
2. Console 觀察 JS 錯誤：若 data 為 undefined 或缺少 name 屬性，會拋出錯誤導致後續程式碼不執行。
3. 資料型別轉換：若後台回傳字串而非 JSON 物件，需 JSON.parse(data) 或設定 dataType: "json"。
4. 快取問題：GET 請求易被快取，改用 POST 或加時間戳參數 ?_=${Date.now()}。

最佳實務建議

• 統一使用 $.ajax 或 $.getJSON，明確指定 dataType: "json"，自動解析回應。
• 前後端約定統一回應格式：{success: true, data: {...}, msg: ""}，前端統一攔截處理。
• 使用 .val() 針對表單元素（input, select, textarea），.text()/.html() 針對一般容器元素。

細心檢查選取器語法與 DOM 結構，是解決 AJAX 資料不顯示的關鍵第一步。