jQuery中文入門指南(三) - Rate me:使用AJAX

來源: rainweb 發布時間: 2009-07-12 21:42 閱讀: 2182 次推薦: 0 原文鏈接 [收藏]

在這一部分我們寫了一個小小的AJAX應用，它能夠rate一些東西（譯Keel注：就是對某些東西投票），就像在youtube.com上面看到的一樣。

首先我們需要一些服務器端代碼，這個例子中用到了一個PHP文件，讀取rating參數然后返回rating總數和平均數。看一下rate.php代碼.

雖然這些例子也可以不使用AJAX來實現，但顯示我們不會那么做，我們用jQuery生成一個DIV容器，ID是"rating".

$(document).ready(function() {
    // generate markup
    var ratingMarkup = ["Please rate: "];
    for(var i=1; i <= 5; i++) {
        ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
    }
    // add markup to container and applier click handlers to anchors
    $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
        e.preventDefault();
        // send requests
        $.post("rate.php", {rating: $(this).html()}, function(xml) {
            // format result
            var result = [
                "Thanks for rating, current average: ",
                $("average", xml).text(),
                ", number of votes: ",
                $("count", xml).text()
            ];
            // output result
            $("#rating").html(result.join(''));
        } );
    });
});

這段代碼生成了5個鏈接，并將它們追加到id為"rating"容器中，當其中一個鏈接被點擊時，該鏈接標明的分數就會以rating參數形式發送到rate.php，然后，結果將以XML形式會從服務器端傳回來，添加到容器中，替代這些鏈接。

如果你沒有一個安裝過PHP的webserver，你可以看看這個在線的例子.

不使用javascript實現的例子可以訪問 softonic.de 點擊 "Kurz bewerten!"

更多的AJAX方法可以從這里找到，或者看看API文檔下面的AJAX filed under AJAX.

（譯者Keel注：這個在線實例從國內訪問還是比較慢的，點擊后要等一會兒才能看到結果，可以考慮對它進行修改，比如加上loading，投票后加上再投票的返回鏈接等。此外，這個例子中還是有很多需要進一步消化的地方，看不懂的地方請參考API文檔。）

一個在使用AJAX載入內容時經常發生的問題是：當載入一個事件句柄到一個HTML文檔時，還需要在載入內容上應用這些事件，你不得不在內容加載完成后應用這些事件句柄，為了防止代碼重復執行，你可能用到如下一個function:

// lets use the shortcut
$(function() {
    var addClickHandlers = function() {
        $("a.clickMeToLoadContent").click(function() {
            $("#target").load(this.href, addClickHandlers);
        });
    };
    addClickHandlers();
});

現在，addClickHandlers只在DOM載入完成后執行一次，這是在用戶每次點擊具有clickMeToLoadContent 這個樣式的鏈接并且內容加載完成后.

請注意addClickHandlers函數是作為一個局部變量定義的，而不是全局變量(如：function addClickHandlers() {...})，這樣做是為了防止與其他的全局變量或者函數相沖突.

另一個常見的問題是關于回調(callback)的參數。你可以通過一個額外的參數指定回調的方法，簡單的辦法是將這個回調方法包含在一個其它的function中:

// get some data
var foobar = ;
// specify handler, it needs data as a paramter
var handler = function(data) {
  
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );