首頁 > php教程 > PHP开发 > jQuery起點教程之使用AJAX

jQuery起點教程之使用AJAX

黄舟
發布: 2016-12-14 16:38:34
原創
1158 人瀏覽過

在這一部分我們寫了一個小小的AJAX應用,它能夠rate一些東西(譯Keel註:就是對某些東西投票),就像在youtube.com上面看到的一樣。
首先我們需要一些伺服器端程式碼,這個範例中用到了一個PHP文件,讀取rating參數然後回傳rating總數和平均數。看一下rate.php程式碼.
雖然這些範例也可以不使用AJAX來實現,但顯示我們不會那麼做,我們用jQuery產生一個DIV容器,ID是"rating".$(document).ready(function( ) {
        // generate markup
        var ratingMarkup = ["lease rate: "];
        ratingMarkup[ratingMarkup.length] = "" + i + " ";
        }
        // add markup to container and applier click handlers to anchors
) "a").click(function(e) {
                e.preventDefault();
          "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()
                        ];
                         $("#rating").html(result.join(''));
           這段程式碼產生了5個鏈接,並將它們追加到id為"rating"容器中,當其中一個鏈接被點擊時,該鏈接標明的分數就會以rating參數形式發送到rate.php,然後,結果將以XML形式會從伺服器端傳回來,加入容器中,取代這些連結。

如果你沒有一個安裝過PHP的webserver,你可以看看這個在線的例子.
不使用javascript實現的例子可以訪問softonic.de 點擊"Kurz bewerten!"

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

(譯者註:這個在線實例從國內訪問還是比較慢的,點擊後要等一會兒才能看到結果,可以考慮對它進行修改,比如加上loading,投票後加上再投票的返回連結等。發生的問題是:當載入一個事件句柄到一個HTML文件時,還需要在載入內容上套用這些事件,你必須在內容載入完成後套用這些事件句柄,為了防止程式碼重複執行,你可能用到下列一個function:$(function() {
        var addClickHandlers = function() {
                           $("#target").load(this.href, addClickHandlers );
                });
        };
        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]); } );用到在簡單的AJAX後,我們可以認為已經非常之「web2.0」了,但是到現在為止,我們還缺少一些酷炫的效果。下一節將會談到這些效果.

 更多相關文章請關注PHP中文網(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板