jQuery AJAX data 參數寫法詳解：特殊字符鍵名、serialize 序列化與對象字面量最佳實踐

核心問題

$ajsx{} 方法的 data 屬性如何編寫？鍵名含點號（如 filter.type）如何處理？

三種主流寫法對比

特殊字符鍵名處理規範

// ✅ 正確：引號包裹
data: {
  "filter.type": "value1",
  "user[name]": "value2",
  "json-data": "value3"
}

// ❌ 錯誤：裸露特殊字符
data: {
  filter.type: "value1"  // SyntaxError: Unexpected token '.'
}

實戰場景代碼

場景一：複雜嵌套參數對象

const params = {
  "filter.type": "advanced",
  "filter.keyword": $("#keyword").val(),
  "page.pageNum": 1,
  "page.pageSize": 20,
  "sort.field": "createTime",
  "sort.order": "desc"
};
$.ajax({
  url: "/api/search",
  method: "POST",
  data: params,  // jQuery 會自動轉為 filter.type=advanced&filter.keyword=...
  dataType: "json"
});

場景二：表單混合自定義參數

const formData = $('#searchForm').serializeArray();  // 數組 [{name, value}, ...]
formData.push({ name: "extra.token", value: getToken() });
formData.push({ name: "extra.timestamp", value: Date.now() });

$.ajax({
  url: "/api/submit",
  data: formData,  // 支援數組格式
  ...
});

場景三：JSON 請求體（非表單編碼）

$.ajax({
  url: "/api/json",
  method: "POST",
  contentType: "application/json",  // 關鍵：告知後端解析 JSON
  data: JSON.stringify({  // 必須手動序列化
    filter: { type: "advanced", keyword: "test" },
    page: { num: 1, size: 20 }
  }),
  dataType: "json"
});

避坑指南

• GET 請求長度限制：data 會拼接到 URL，超過 2KB 可能被截斷，大數據用 POST
• 傳統 #id# 語法：MyBatis/早期框架用法，jQuery AJAX 僅支援 #{id} 風格（即標準對象/數組）
• 深度序列化：$.param(obj, true) 開啟傳統模式，a[b][c]=1 編碼為 a%5Bb%5D%5Bc%5D=1，後端需支援解析
• 文件上傳必須：processData: false, contentType: false + FormData