AJAX-Muster in Rails zum Senden kleiner Datenblöcke

Question

Ich habe eine Webseite mit vielen kleinen Bildern darauf. In einem typischen Szenario klickt der Benutzer auf das Bild und erwartet, dass es sich mit einem neuen Bild ändert.

Anforderungen:

1. Wenn der Benutzer auf dem Bild klickt, sollte es sofort bekannt in einem Ajax-Weg zu einem Controller werden.
2. Einige Zeichenfolgen sollten an einen Controller übergeben werden, wenn der Benutzer auf das Bild klickt.
3. Controller macht seinen Job und gibt ein anderes Bild zurück (welches das alte ersetzt).
4. Zusammen mit Bild-Controller gibt ein paar zusätzliche Zeichenfolgen (z. B. Abschlussstatus) zurück.
5. Webseite aktualisiert altes Bild mit neuem und aktualisiert auch andere Teile mit diesen neuen Zeichenfolgen.
6. Anzahl der Bilder auf einer Seite variiert, aber möglicherweise kann es ein paar Dutzend sein.

Frage: Was Ajax-Technik sollte hier verwendet werden? Ich bin ziemlich neu bei Ajax und fühle mich nicht solide mit Mustern. Sollte es Json oder etwas anderes sein?

Jedes Codebeispiel wäre sehr, sehr willkommen und hilfreich.

Vielen Dank.

Answer 1

Nun, es klingt, als ob Sie einen Ereignisbeobachter für das Bildobjekt benötigen. Auf diesem Bildobjekt könnten Sie verschiedene benutzerdefinierte Attribute haben, wie z. B. imageid = "2" usw. Wenn das Element beim Klicken beobachtet wird, lesen Sie die Attribute der Elemente und leiten sie an einen AJAX-Aufruf weiter. Ich bin mir nicht sicher, ob das Bild in der Datenbank bekannt ist oder auf der Seite selbst verfügbar wäre. Vielleicht eine Zurück/Zurück-Taste? In jedem Fall könnte der AJAX-Aufruf entweder direkt JavaScript zurückgeben, das dann geparst wird, um das DOM zu aktualisieren, und das Bild durch die neue Bildquelle ersetzen, oder es könnte eine JSON-Antwort zurückgeben, die vom AJAX-Callback gelesen und analysiert werden muss dann aktualisiert das DOM. Am einfachsten ist es, JS-Code zurückzugeben, der geparst wird, aber ich bevorzuge es, all mein JavaScript in einer Datei zu haben und es nicht überall mit serverseitigem Code gemischt zu haben.

Es hängt wirklich davon ab, welche AJAX-Bibliothek Sie verwenden.

Mit jQuery können Sie so etwas tun.

$ ("# buttonImage") klicken (function() {

var imageid = $ (this) .attr ('imageid.');

$ .getJSON ("/ Controller/get_image/"+ imageid, Funktion (Daten) { $ (" # buttonImage "). attr (" src ", Daten.Bilderrc); });

});

Und Ihre/Controller/get_image/123 würde eine JSON Antwort zurückgeben wie ...

{ 'imagesrc': '/my/image.jpg'}

Answer 2

Soweit ich weiß, ist die einzige browsersichere Möglichkeit, ein Bild zu ändern, die Zuweisung einer neuen URL zum src-Attribut. Wenn Sie ein Bild an eine Anfrage zurücksenden, die einige Parameter übergibt, kann dies die clientseitige Einlösung der Bilder verhindern. Aus diesen Gründen würde ich die Übertragung von Textdaten und Bildern getrennt behandeln. Der Abschlussstatus kann immer als HTTP-Statustext zurückgegeben werden. Wenn jedoch mehr Informationen vom Server benötigt werden, können Sie ihn immer in JSON oder XML zurückgeben, wobei JSON am einfachsten ist. Die Reaktionszeit könnte verbessert werden, indem Bilder beim mouseover-Ereignis vorab geladen werden.