[JAVA] DOM-Beispiel → Generieren Sie dynamisch HTML-Tags und zeigen Sie Daten in der Datenbank an

Einführung

So generieren Sie dynamisch HTML-Tags in Unternehmen, übergeben Datenbankdaten an diese und zeigen sie auf dem Bildschirm an Da ich unterrichtet wurde, werde ich es als Übung zum Schreiben meiner eigenen Notizen und Artikel geben.

Quellcode

Unten finden Sie ein Beispiel für die Verwendung von DOM. HTML

display.html

<div class="content">
	<p id=displayTitle>
Titel
	</p>
	<div id="displayBox" class="displayBox">
	<!--Hier setzt das dynamisch generierte p-Tag an!-->
	</div>
</div>

Hier generieren wir einfach eine HTML-Datei, um das dynamisch generierte p-Tag zu platzieren. Der Inhalt des div-Tags ist leer, da jQuery generiert, was Sie in \ #displayBox anzeigen möchten.

Verarbeitung in jQuery

display.js

		$.ajax({
				type: "GET",
				url: '/xxx/display/displayReturn',
				dataType: 'json',
				//Daten ist der Server-Variablen erhalten von
				success: function(data) {
				
			var contents = data;
				//Die displayBox speichert die Daten, die auf dem Bildschirm angezeigt werden sollen.
				var $displayBox = $('#displayBox')
				//Erstellen Sie schließlich ein Array, um die Elemente in der displayBox zusammenzufügen
				var addItemList = [];
				
				//Drehen Sie die von der erweiterten for-Anweisung empfangenen Daten nacheinander
				contents.forEach(function(elem) {
				
					//Definieren Sie das p-Tag"{"Ich werde danach Elemente setzen
					var $displayItem = $('<p/>', {
					
						//Definieren Sie den im p-Tag angezeigten Text
						text : elem.displayText,
						
						//ID definieren
						id    : elem.displaySeq + "d",
						
						//Geben Sie den Klassennamen an
						class : "displayContent"
					})
					//Beim Anhängen eines untergeordneten Elements an das generierte p-Tag
					$displayItem.append ($('<span/>', {
						class : "children"
					}))
					//In einem Array speichern
					addItemList.push($helpItem) 
				});
				
			 	//Zusammen in Variablen gespeichert, die an den Bildschirm übergeben werden sollen
				$displayBox.append(addItemList)
		}

Hier wird der Prozess zum Anzeigen der Eigenschaften der Daten (Argumente), die durch Kommunikation mit der Serverseite über Ajax erfasst wurden, im dynamisch generierten p-Tag dargestellt. Der displayText ist ein Bild, das den Text enthält, der in HTML angezeigt werden soll, der aus der Datenbank auf der Serverseite abgerufen wurde, und der displaySeq ist ein Bild, das die Seriennummer der aus der Datenbank erhaltenen Datensätze enthält, um den generierten Tags unterschiedliche IDs zuzuweisen. Ich werde es für verwenden! Beispiel id = "1d" d ist eine Abkürzung für display (lacht)

Sie können auch ein span-Tag usw. als untergeordnetes Element erstellen, indem Sie unter dem p-Tag anhängen. Ich habe es als Referenz gepostet. Wenn Sie hier eine Font Awesome-Klasse hinzufügen, können Sie jedem p-Tag Symbole usw. hinzufügen!

Java-Verarbeitung (serverseitige Verarbeitung)

displayAction.java

		public List<JsonData> displayReturn() {

		//Holen Sie sich die Daten, die Sie anzeigen möchten, aus der Datenbank
		List<ContentEntity>contents =new ArrayList<ContentEntity>();
		contents = displayService.getContents();
		//Hier hat der Inhalt einen String vom Typ displayText als Eigenschaft.(Instanzen mit mehreren Inhaltstypen mit p-Tag) und DisplaySeq mit langem Typ
		
		//Liste für die Übergabe als json
		List<JsonData> jsonDataList = new ArrayList<>();
		
		for (ContentEntity entity : contents) {
			//Geben Sie Werte in die json-Konvertierungsmethode ein
			JsonData jsondata = createJsonData(entity.getDisplayText(),entity.getDisplaySeq());
			//Fügen Sie die generierten JSON-Daten in die Liste ein
			jsonDataList.add(jsonData);
		}

		return jsonDataList;
	}

Schließlich Java-Verarbeitung. Asynchrone Kommunikation von HTML → JS in der richtigen Reihenfolge (Teil über Erfolg) → Java-Verarbeitung → js DOM-Generierung. Der Java-Teil ist nicht sehr wichtig, deshalb habe ich ihn am Ende gesetzt. Der Prozess wird mit Aktion → Service → Dao → Datenbank fortgesetzt, aber hier wird nur der Aktionsteil gebucht. Als private Methode gibt es auch eine Methode zum Konvertieren in jsondata, aber ich werde sie weglassen (lacht)

abschließend

Das Generieren von DOM-Elementen mag zunächst schwierig erscheinen, aber sobald Sie es erstellen, erhalten Sie ein Bild. Bitte beziehen Sie sich darauf! Danke fürs Zuschauen! !!