Comment générer dynamiquement des balises HTML en entreprise, leur transmettre des données de base de données et les afficher à l'écran Depuis que j'ai été enseigné, je vais le donner comme une pratique pour écrire mes propres notes et articles.
Voici un exemple utilisant DOM. HTML
display.html
<div class="content">
<p id=displayTitle>
Titre
</p>
<div id="displayBox" class="displayBox">
<!--C'est là que va le p-tag généré dynamiquement!-->
</div>
</div>
Ici, nous générons simplement un fichier html pour mettre la balise p générée dynamiquement. Le contenu de la balise div est vide car jQuery génère ce que vous souhaitez afficher dans \ #displayBox.
display.js
$.ajax({
type: "GET",
url: '/xxx/display/displayReturn',
dataType: 'json',
//les données sont le serveur-Variables reçues de
success: function(data) {
var contents = data;
//La displayBox stocke les données à afficher sur l'écran.
var $displayBox = $('#displayBox')
//Enfin, créez un tableau pour rassembler les éléments de la displayBox
var addItemList = [];
//Faites pivoter les données reçues par l'instruction Extended for une par une
contents.forEach(function(elem) {
//Définir la balise p"{"Je vais mettre des éléments dans ce qui suit
var $displayItem = $('<p/>', {
//Définir le texte affiché dans la balise p
text : elem.displayText,
//Définir l'identifiant
id : elem.displaySeq + "d",
//Donnez le nom de la classe
class : "displayContent"
})
//Lors de l'attachement d'un élément enfant à la balise p générée
$displayItem.append ($('<span/>', {
class : "children"
}))
//Stocker dans un tableau
addItemList.push($helpItem)
});
//Stockés ensemble dans des variables à transmettre à l'écran
$displayBox.append(addItemList)
}
Ici, le processus d'affichage des propriétés des données (argument) acquises en communiquant avec le côté serveur à l'aide d'ajax est montré dans la balise p générée dynamiquement. Le displayText est une image qui contient le texte à afficher en html obtenu à partir de la base de données côté serveur, et le displaySeq est une image qui contient le numéro de série des enregistrements obtenus à partir de la base de données, afin de donner différents identifiants aux balises générées. Je vais l'utiliser pour! Exemple id = "1d" d est un acronyme pour display (rires)
Vous pouvez également créer une balise span, etc. en tant qu'élément enfant en utilisant append sous la balise p. Je l'ai posté pour référence. Si vous ajoutez une classe Font Awesome ici, vous pouvez ajouter des icônes, etc. à chaque balise p!
displayAction.java
public List<JsonData> displayReturn() {
//Obtenez les données que vous souhaitez afficher à partir de la base de données
List<ContentEntity>contents =new ArrayList<ContentEntity>();
contents = displayService.getContents();
//Ici, le contenu a un type de chaîne displayText comme propriété.(Plusieurs instances de type de contenu avec balise p) et displaySeq de type long
//Liste pour passer comme json
List<JsonData> jsonDataList = new ArrayList<>();
for (ContentEntity entity : contents) {
//Entrez des valeurs dans la méthode de conversion json
JsonData jsondata = createJsonData(entity.getDisplayText(),entity.getDisplaySeq());
//Mettre les données json générées dans la liste
jsonDataList.add(jsonData);
}
return jsonDataList;
}
Enfin, traitement java. Communication asynchrone de html → js dans l'ordre (partie ci-dessus succès) → traitement java → génération de DOM js. La partie java n'est pas très importante, donc je la mets à la fin. Le processus se poursuit avec action → service → dao → base de données, mais ici seule la partie action est affichée. De plus, en tant que méthode privée, il existe une méthode de conversion en jsondata, mais je vais l'omettre (rires)
Générer des éléments DOM peut sembler difficile au début, mais dès que vous le créez, vous obtiendrez une image, alors veuillez vous y référer! Merci d'avoir regardé! !!