StartKit.Ajax

 

1. //ajax應用
2. //天哪，php我看不懂。算了。找個asp.net的例子吧。
3. /*
4.     用jQuery產生一個DIV容器，ID是"rating".
5.     代碼產生了5個連結，並將它們追加到id為"rating"容器中，當其中一個連結被點擊時，
6.     該連結標明的分數就會以rating參數形式發送到rate.php，然後，
7.     結果將以XML形式會從伺服器端傳回來，添加到容器中，替代這些連結。
8. */
9. $(document).ready(function() {
10.     // generate markup
11.     var ratingMarkup = ["Please rate: "];
12.     for(var i=1; i <= 5; i++) {
13.         ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
14.     }
15.     // add markup to container and applier click handlers to anchors
16.     $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
17.         e.preventDefault();
18.         // send requests
19.         $.post("rate.php", {rating: $(this).html()}, function(xml) {
20.             // format result
21.             var result = [
22.                 "Thanks for rating, current average: ",
23.                 $("average", xml).text(),
24.                 ", number of votes: ",
25.                 $("count", xml).text()
26.             ];
27.             // output result
28.             $("#rating").html(result.join(''));
29.         } );
30.     });
31. });
33. /*
34. 一個在使用AJAX載入內容時經常發生的問題是：當載入一個事件控制代碼到一個HTML文檔時，
35. 還需要在載入內容上應用這些事件，你不得不在內容載入完成後應用這些事件控制代碼，
36. 為了防止代碼重複執行，你可能用到
37. */
38. // lets use the shortcut
39. $(function() {
40.     var addClickHandlers = function() {
41.         $("a.clickMeToLoadContent").click(function() {
42.             $("#target").load(this.href, addClickHandlers);
43.         });
44.     };
45.     addClickHandlers();
46. });
47. /*
48. 現在，addClickHandlers只在DOM載入完成後執行一次，這是在使用者每次點擊具有clickMeToLoadContent 這個樣式的連結並且內容載入完成後.
49. 請注意addClickHandlers函數是作為一個局部變數定義的，而不是全域變數(如：function addClickHandlers() {...})，
50. 這樣做是為了防止與其他的全域變數或者函數相衝突.
51. 另一個常見的問題是關於回調(callback)的參數。你可以通過一個額外的參數指定回調的方法，簡單的辦法是將這個回調方法包含在一個其它的function中:
52. */
53. $(function(){
54.     // get some data
55.     var foobar = ...;
56.     // specify handler, it needs data as a paramter
57.     var handler = function(data) {
58.       ...
59.     };
60.     // add click handler and pass foobar!
61.     $('a').click( function(event) { handler(foobar); } );
63.     // if you need the context of the original handler, use apply:
64.     $('a').click( function(event) { handler.apply(this, [foobar]); } );
65. });