更新日期： 2025 年 3 月 9 日
本文為 jQuery 基本介紹系列文，第 8 篇：
url
:
'
https://api.example.com/data
'
,
method
:
'
GET
'
,
// 預設為 'GET'
dataType
:
'
json
'
,
// 預設為 'text'
data
:
{
param1
:
'
value1
'
,
param2
:
'
value2
'
},
// 傳遞給伺服器的數據
success
:
function
(
response
)
{
console
.
log
(
response
)
;
// 成功回應的資料
error
:
function
(
error
)
{
console
.
error
(
'
請求失敗：
'
,
error
)
;
// 請求失敗的錯誤訊息
}
)
;
$.ajax
參數說明及預設值
$.get('https://api.example.com/data', { param1: 'value1' }, function(response) {
console.log(response); // 成功回應的資料
});
.post
方法
$.post('https://api.example.com/data', { param1: 'value1' }, function(response) {
console.log(response); // 成功回應的資料
});
在這兩個方法中：
method
:
'
GET
'
,
dataType
:
'
json
'
}
)
.
done
(
function
(
data
,
textStatus
,
jqXHR
)
{
console
.
log
(
'
請求成功，回應資料：
'
,
data
)
;
// 解析後的 JSON 資料
}
)
.
fail
(
function
(
error
)
{
console
.
error
(
'
請求失敗：
'
,
error
)
;
// 處理錯誤
}
)
;
.done()
的應用場景
當需要鏈式操作時，
.done()
方法比
success
回呼函數更具可讀性，且更方便組合多重異步操作。
例如，下例中在第一次請求後發送第二次請求：
$.ajax({ url: 'https://api.example.com/data', method: 'GET' })
.done(function(data) {
console.log('第一次回應資料：', data);
return $.ajax({ url: 'https://api.example.com/nextData', method: 'GET' });
.done(function(nextData) {
console.log('第二次回應資料：', nextData);
.fail(function(error) {
console.error('請求失敗：', error);
});
這樣的操作方式更直觀且易於維護。
比較
$.ajax.done
與
fetch
JavaScript 的
fetch
是另一種非同步請求方法，返回一個
Promise
物件，並且不依賴 jQuery。
相比
$.ajax
，
fetch
支援更現代的 Promise 語法及
async/await
，使代碼更加精簡易讀。
以下是
$.ajax.done
和
fetch
的代碼示例及差異比較。
$.ajax.done
代碼範例
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
dataType: 'json'
.done(function(data) {
console.log('jQuery 回應資料：', data);
.fail(function(error) {
console.error('jQuery 請求失敗：', error);
});
fetch
代碼範例
fetch('https://api.example.com/data')
.then(response => response.json()) // 將回應轉為 JSON 格式
.then(data => {
console.log('fetch 回應資料：', data);
.catch(error => {
console.error('fetch 請求錯誤：', error);
});
|
特性
|
$.ajax.done
|
fetch
|
|
語法依賴
|
依賴 jQuery 函式庫
|
原生 JavaScript 支援
|
|
回傳資料處理
|
data 自動轉換為 JSON 格式
|
需手動調用 response.json() 解析
|
|
回應格式
|
自動根據 dataType 設定回應格式
|
默認為字串，手動解析
|
|
支援語法
|
支援 jQuery 的事件鏈結方法 .done()
|
支援 Promise 和 async/await
|
|
錯誤處理
|
使用 .fail() 或 error 回呼
|
使用 .catch() 或 try/catch 處理
|
