對於不熟悉 JavaScript/jQuery 的開發者，實現表單的無刷新提交（AJAX）可能看似複雜。本文提供一個經過測試、帶詳細註釋的通用封裝函數，並解釋關鍵參數含義。
將表單序列化，通過 `$.ajax` 發送 POST 請求，根據返回結果處理 UI 反饋。
function submitForm() {
// 1. 獲取表單元素並序列化數據 (需引用 jQuery)
var formParam = $("#myFormId").serialize();
// 2. 發起 AJAX 請求
$.ajax({
type: 'post', // 提交方式
url: '/api/submit', // 後端接口地址
data: formParam, // 提交的序列化數據
cache: false, // 禁止緩存
dataType: 'json', // 預期返回數據類型
success: function(response) {
// 3. 處理成功回調
if (response.success) {
alert('添加成功！');
// 可選：重置表單、刷新列表、關閉彈窗等
$('#myFormId')[0].reset();
} else {
alert('失敗：' + response.message);
}
},
error: function(xhr, status, error) {
// 4. 處理網絡/服務器錯誤
console.error('請求失敗:', status, error);
alert('系統繁忙，請稍後重試');
}
});
}
| 參數/方法 | 作用 |
|---|---|
$("#myFormId").serialize() | 將表單內所有帶 `name` 屬性的輸入控件值序列化為 `key1=val1&key2=val2` 格式字串，自動處理編碼。 |
type: 'post' | 使用 HTTP POST 方法，適合提交數據，比 GET 更安全、無長度限制。 |
dataType: 'json' | 告訴 jQuery 自動將響應文本解析為 JavaScript 對象，`success` 回調直接接收對象。 |
cache: false | 在 URL 後添加時間戳參數 (`_=timestamp`)，防止瀏覽器緩存 GET 請求（POST 通常不緩存，但加上更保險）。 |