jQuery EasyUI + AJAX 純前端渲染頁面：JSON 數據綁定到 HTML 標籤實戰

不使用 JSP 等服務端模板，僅靠 HTML + EasyUI + AJAX 實現頁面數據渲染。核心流程：$.ajax({dataType:'json'}) → 成功回調拿到 JS 對象 → 選擇器定位 DOM → 設置 .text()/.val()/.html()。本文給出完整可運行範例，並解釋常見坑點。

最小可運行範例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI AJAX 渲染示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/themes/default/easyui.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/jquery.easyui.min.js"></script>
</head>
<body>
  <label>發貨單編號：</label>
  <div id="orderNo" class="easyui-textbox" style="width:200px;"></div>
  <label>客戶名稱：</label>
  <div id="custName" class="easyui-textbox" style="width:200px;"></div>

  <script>
  $(function() {
    $.ajax({
      url: 'order/detail.action',   // 後端返回 JSON
      type: 'post',
      dataType: 'json',             // 關鍵：自動 parse 為 JS 對象
      data: { orderId: '202401001' },
      success: function(data) {
        // data 結構假設：{ "orderNo": "SO202401001", "custName": "張三" }
        $('#orderNo').textbox('setValue', data.orderNo);  // EasyUI 組件賦值
        $('#custName').textbox('setValue', data.custName);
        // 原生 DOM 方式：document.getElementById('orderNo').textContent = data.orderNo;
      },
      error: function(xhr, status, err) {
        console.error('請求失敗', status, err);
        $.messager.alert('錯誤', '數據加載失敗：' + err);
      }
    });
  });
  </script>
</body>
</html>

關鍵點解析

1. dataType: 'json'：jQuery 自動調用 JSON.parse，回調參數 data 已是對象，無需手動解析。
2. EasyUI 組件賦值：輸入框用 .textbox('setValue', val)、下拉框用 .combobox('setValue', val)、表格用 .datagrid('loadData', rows)。切勿直接用 .val()，會繞過組件內部狀態。
3. 字段名匹配：後端 JSON 鍵名（如 orderNo）必須與前端 JS 讀取鍵名完全一致，區分大小寫。
4. 異常處理：error 回調捕獲 HTTP 非 2xx、JSON 解析失敗、網絡超時等，配合 $.messager.alert 友好提示。

進階：渲染列表/表格

// 後端返回：{ "rows": [ {"id":1,"name":"商品A"}, {"id":2,"name":"商品B"} ] }
success: function(data) {
    $('#dg').datagrid('loadData', data.rows); // 直接加載數組
}

避坑清單

• 返回 Content-Type: text/html 導致 parsererror → 後端設置 application/json;charset=UTF-8。
• 大小寫不一致（orderNo vs orderno） → 統一駝峰或下劃線。
• 同步請求 async:false 卡死 UI → 永遠用異步 + loading 遮罩。

掌握「AJAX 拿 JSON → 選擇器找組件 → API 賦值」三步曲，即可實現完全前後端分離的頁面渲染。