Sollte ich HTML-Markup in meine JSON-Antwort aufnehmen?

13

Auf einer E-Commerce-Website möchte ich beim Hinzufügen eines Artikels zu einem Warenkorb ein Popup-Fenster mit den verfügbaren Optionen anzeigen. Stellen Sie sich vor, Sie bestellen einen iPod Shuffle und müssen nun die Farbe und den Text für die Gravur auswählen.

Ich möchte, dass das Fenster modal ist, also verwende ich einen Leuchtkasten, der von einem Ajax-Aufruf ausgefüllt wird. Jetzt habe ich zwei Möglichkeiten:

Option 1: Senden Sie nur die Daten und generieren Sie das HTML-Markup mit JavaScript

Das Schöne daran ist, dass die Ajax-Anforderung auf ein Minimum reduziert wird und die Daten nicht mit dem Markup gemischt werden.

Das Schöne daran ist, dass ich jetzt JavaScript für das Rendern verwenden muss, anstatt dass es auf der Serverseite von einer Vorlagen-Engine ausgeführt wird. Möglicherweise kann ich den Ansatz mithilfe einer clientseitigen Templating-Lösung ein wenig aufräumen .

Option 2: Senden Sie das HTML-Markup

Das Gute daran ist, dass ich dieselbe serverseitige Templating-Engine verwenden kann, die ich für den Rest meiner Rendering-Aufgaben (Django) verwende, also das Rendern des Leuchtkastens. JavaScript wird nur verwendet, um das HTML-Fragment in die Seite einzufügen. Das Rendering wird also eindeutig der Rendering-Engine überlassen. Für mich ergibt das Sinn.

Aus irgendeinem Grund ist es mir jedoch unangenehm, Daten und Markups in einem Ajax-Aufruf zu mischen. Ich bin mir nicht sicher, warum mir das unangenehm ist. Ich meine, es ist die gleiche Art und Weise, wie jede Webseite bedient wird - Daten plus Markup - richtig?

mvc django templates json Mike M. Lin
quelle
Gute Frage. Scheint aber zum Stackoverflow zu gehören.
Saeed Neamati
1
@SaeedNeamati Fragen zum Softwaredesign, insbesondere Whiteboard- und konzeptionelle Fragen wie diese, sind hier themenbezogen und in Bezug auf Stack Overflow nicht themenbezogen .

Antworten:

10

JSON sollte nur die Daten und kein Markup enthalten. Auf lange Sicht ist dieser Ansatz erweiterbarer, da die JSON-Daten möglicherweise in anderen Teilen Ihrer Site verwendet werden. Wenn Sie Markup einschließen, wird es viel schwieriger, dieselben Daten zum Auffüllen einer anderen Vorlage zu verwenden.

davidk01
quelle
2
Toller Punkt zur Wiederverwendung. Jeder scheint dafür zu stimmen, dass die Ajax-Anfrage aus verschiedenen Gründen nur Daten und kein Markup enthält. Aber dieser ist ein großer . Vielen Dank.
Mike M. Lin
2
Ganz zu schweigen davon, dass JSON ohne Markup kleiner ist und weniger Bandbreite benötigt.
@ JackManey: Auch ein guter Punkt. Die tatsächlichen Kosten für zusätzliche Bandbreite sind jedoch nicht allzu hoch, nachdem Sie die Kosten für die HTTP-Anforderung bereits aufgebraucht haben. Und ich kann mir einige Setups vorstellen, bei denen Sie wissen, dass die Client-Computer so beschissen sind, dass die Generierung des DOM in Echtzeit mit JavaScript mehr kosten würde. Denken Sie: Interne Apps mit Benutzern auf alten Rechnern / Browsern.
Mike M. Lin
3

Ich würde die Daten in der Anfrage senden und das Markup in js aufbauen. Ein zusätzlicher Vorteil wäre, dass weniger Bandbreite verbraucht würde. Es ist eine Art persönliche Präferenz, aber es ist wahrscheinlich eine bessere Idee, das clientseitige Markup von der Serverseite fernzuhalten. Ich habe auch eine Django-Website und benutze das Templating-System nur, um einige Json-Variablen auf der Seite zu platzieren (eine Ajax-Datei weniger ist erforderlich) und um src-Dateien zu verwenden, wenn ich auf meinem Computer entwickle. Die gesamte Clientseite wird mit ExtJS ausgeführt.

Bitte
quelle
Ich mag Ihre Idee, die JSON-Daten in die Seite zu brennen - nicht hier, da ich die zusätzlichen Daten erst abrufe, wenn ich weiß, welchen Artikel Sie Ihrem Warenkorb hinzufügen. Heutzutage scheint es üblich zu sein, eine Anforderung für das Seitenlayout und dann eine Sekunde für die Daten zu stellen. Wenn Sie die Daten in einer JavaScript-Variablen haben, ist die zweite HTTP-Anforderung nicht mehr erforderlich, ohne dass zwei verschiedene Bits des Rendering-Codes (dh Client und Server) vorhanden sind.
Mike M. Lin
Oh, ich sehe, dass Ihr Server nicht weit genug fortgeschritten ist, um vorher zu wissen, was der Benutzer in den Warenkorb legen wird;).
Pllee
1

Ich denke, Sie sprechen über die Vor- und Nachteile von beiden. Schauen Sie sich eine dritte Möglichkeit an, das Javascript für Ihren Leuchtkasten aus einer Django-Ansicht zu generieren. Haben Sie dann in Ihrem JSON nur die Daten, um sie für jede Ansicht zu aktualisieren?

Sie sollten in der Lage sein, den gesamten Templating-Code in Javascript-Variablen zu packen und diese dann mit Javascript auszugeben, nachdem die JSON-Anfrage auf der Clientseite eingegangen ist.

Ryan Gibbons
quelle
Danke für die Antwort. Das habe ich eigentlich in Option 1 gemeint. Die Lightbox als Container würde in die Seite eingebrannt, aber verborgen. Die JSON-Daten aus der Ajax-Anforderung werden verwendet, um den Inhalt im Container zu generieren. Ein Teil dieses Inhalts würde mit HTML markiert. Wie haben Sie Option 1 interpretiert? Vielleicht , dass meine dritte Option sein.
Mike M. Lin
Ich dachte etwas in der Art von stackoverflow.com/questions/6008908/… und verwendete dann JSON, um die Daten nach dem ersten Laden zu ersetzen
Ryan Gibbons,
0

Verwenden Sie die Vorlagen-Engine zum Markieren und bewahren Sie ein verstecktes Feld auf, um Werte zu speichern, die Sie dann mithilfe eines Selektors im Dokument finden können.

Alex
quelle