jQuery-Start-Tutorial – mit AJAX

In diesem Teil haben wir eine kleine AJAX-Anwendung geschrieben, die etwas bewerten kann (Anmerkung von Keel: Es geht darum, für etwas zu stimmen), genau wie das, was Sie auf youtube.com sehen.
Zuerst benötigen wir serverseitigen Code. In diesem Beispiel wird eine PHP-Datei verwendet, um den Bewertungsparameter zu lesen und die Gesamtzahl und den Durchschnitt der Bewertungen zurückzugeben. Schauen Sie sich den rate.php-Code an.
Obwohl diese Beispiele auch ohne die Verwendung von AJAX implementiert werden können, zeigt es, dass wir das nicht tun werden. Wir verwenden jQuery, um einen DIV-Container mit der ID „rating“ zu generieren.$( document).ready( function() {
                                                                                                                                                                                                                                                   .length] = "" + i + " ";
                                                                                                                                       ("#rating ").append( RatingMarkup.join('') ).find("a").click(function(e) {
            e.preventDefault();
                                                                                                                                                         „Danke für die Bewertung, aktueller Durchschnitt:“ ,
                                                                                   $("count", xml).text() >                                                                                 } );
}); Dieser Code generiert 5 Links und hängt sie an den Container mit der ID „rating“ an ". Wenn auf einen der Links geklickt wird, wird die durch den Link angegebene Punktzahl in Form des Bewertungsparameters an rate.php gesendet. Anschließend wird das Ergebnis vom Server in XML-Form zurückgegeben und dem Container hinzugefügt um diese Links zu ersetzen.

Wenn Sie keinen Webserver mit installiertem PHP haben, können Sie sich dieses Online-Beispiel ansehen.
Beispiele, die kein Javascript verwenden, können Sie auf softonic.de besuchen und auf „Kurz bewerten“ klicken. "

Weitere AJAX-Methoden finden Sie hier, oder werfen Sie einen Blick auf AJAX, das unter AJAX abgelegt ist. Um die Ergebnisse zu sehen, können Sie eine Änderung in Betracht ziehen, z. B. das Hinzufügen von Loading oder das Hinzufügen eines Return-Links, um erneut abzustimmen nach der Abstimmung usw. Darüber hinaus gibt es in diesem Beispiel noch viele Stellen, die weiter verarbeitet werden müssen. Wenn Sie es nicht verstehen, lesen Sie bitte das API-Dokument.)

Ein Problem, das häufig auftritt Beim Laden von Inhalten mit AJAX gilt, dass Sie beim Laden eines Ereignishandlers in ein HTML-Dokument diese Ereignishandler auch nach Abschluss des Ladevorgangs anwenden müssen, um eine wiederholte Ausführung des Codes zu verhindern , können Sie die folgende Funktion verwenden: $(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent"). click(function() {
                                                                                                                                                                                     
}); Jetzt wird addClickHandlers nur einmal ausgeführt, nachdem das DOM geladen wurde, d. h. jedes Mal, wenn der Benutzer auf einen Link mit dem clickMeToLoadContent-Stil klickt und der Inhalt geladen wird Eine lokale Variable wird anstelle globaler Variablen definiert (z. B. Funktion addClickHandlers() {...}). Dies geschieht, um Konflikte mit anderen globalen Variablen oder Funktionen zu verhindern.

Eine weitere häufige Frage betrifft Rückrufe (Callback). ) Parameter. Sie können die Rückrufmethode über einen zusätzlichen Parameter angeben. Der einfache Weg besteht darin, die Rückrufmethode in eine andere Funktion einzubinden: // get some data
var foobar = ...;
// handler angeben, es benötigt Daten als Parameter
var handler = function(data) {
...
};
// Click-Handler hinzufügen und foobar übergeben!
$('a') .click( function (event) { handler(foobar); } );

// wenn Sie den Kontext des ursprünglichen Handlers benötigen, verwenden Sie apply:
$('a').click( function (event) { handler.apply(this, [foobar]); } );Nachdem wir einfaches AJAX verwendet haben, können wir denken, dass es bereits sehr „web2.0“ ist, aber bis jetzt fehlen uns noch einige coole Dinge. Diese Effekte werden im nächsten Abschnitt besprochen

Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!