本篇 jQuery 的 AJAX 是從網路資源與網路平台pluralsight中的課程所學習。
Utility Methods
$.each
透過$.each()把陣列或物件中的內容重複取出，再依次去執行 callback。
以下案例為：點擊一個 button，要秀出全部喜愛的城市與圖片。
html
1
2
3
4
5
6
7
8
9
| <div class="favorite-0">
...
</div>
<div class="favorite-1">
...
</div>
<div class="favorite-2">
...
</div>
|
result 的內容（JSON 格式）
1
2
3
4
5
6
7
8
9
10
11
12
| {
image: 'imgaes/paris.png',
name: 'Paris, France',
},
{
image: 'imgaes/london.png',
name: 'London, UK',
},
{
image: 'imgaes/mardird.png',
name: 'Madrid, Spain',
}
|
用$.each來迭代 result 這個 JSON 的物件，並將 name 與 image 新增到 html 內容裡面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $("button").on("click", function() {
$.ajax("/cities/favorite/1", {
contentType: "application/json",
dataType: "json",
success: function(result) {
$.each(result, function(index, city) {
var favorite = $(".favorite-" + index);
favorite.find("p").html(city.name);
favorite.find("img").attr("src", city.image);
});
}
});
});
|
$.each 官方文件
$.map
$.map
使用 map 創立新數組
ex.1
ex.2
將 return 後的 listItem 指定為statusElements再塞回整個清單中。
與$.each的差異是 map 會把結果以新的數組 return，each 沒有返回值，不會改變其值。
$.map 官方文件
detach
使用 detach 而不使用 remove 來刪除元素，detach 會把選取的元素移除，但是會保留著，還是可以再去使用。
這是一個更有效能的做法，
在上面的例子中改為：
1
2
3
4
| $(".status-list")
.detach()
.html(statusElements)
.appendTo(".status");
|
detach 官方文件
Advanced Events
off
停止去監聽符合條件的事件（通常是用 on 新增的事件）。
ex.1 停止全部 click 事件
ex.2 停止單一事件 - 需要應用到 namespacing
ex.3 停止全部相同 namespace 的事件
trigger
trigger()用來觸發所指定的事件類型。
ex1. 等同於點擊 button 觸發事件
同時觸發兩個 click 事件
1
2
3
4
5
6
7
8
9
10
| function picture(){console.log('Show Plane');}
function status(){console.log('In Service');}
$(document).ready(function(){
$('button').on('click.image', picture);
$('button').on('click.details', status);
$('button').on('mouseover.image', zoom);
...
$('button').trigger('click');
});
|
ex.2 trigger 也可以指定 namespace 來觸發
觸發 image namespace 的 click 事件
1
2
3
4
5
6
7
8
9
| function picture(){console.log('Show Plane');}
function status(){console.log('In Service');}
$(document).ready(function(){
$('button').on('click.image', picture);
$('button').on('click.details', status);
...
$('button').trigger('click.image');
});
|
ex.3 可以trigger自訂的event.namespace
trigger一個按鈕可以觸發所有符合條件項目的function
