Lorsque JavaScript demande et traite plusieurs données, de nombreux programmeurs ont souvent du mal à les implémenter. Comment modifier et supprimer dynamiquement sans affecter d'autres éléments de données. Aujourd'hui, nous introduisons une méthode de référence. Par exemple, demandez ce qui suit via XmlRequest.
Copiez le code comme suit :
<span style="font-size:14px;">{ "Tableau" :
[
{ "Id": 3, "Type": "X",
"Contenu": "Le rapport du 18e Congrès national du Parti communiste chinois a souligné quelles sont les formes importantes de démocratie populaire dans notre pays ?",
"Akey": "Système politique démocratique de base", "Bkey": "Système du Congrès populaire",
"Ckey": "Système de coopération multipartite", "Dkey": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "L'antilope tibétaine est un animal protégé au niveau national et est un animal unique de ()",
"Akey" : "Plateau Qinghai-Tibet", "Bkey" : "Xinjiang",
"Ckey": "Qinghai", "Dkey": nul, "NUM": 2 },
{ "Id": 1, "Type": "X", "Content": "La protection des animaux sauvages a de nombreuses significations, et ce qui n'en fait pas partie l'est",
"Akey": "Effet environnemental", "Bkey": "Valeur culturelle",
"Ckey": "Affichage de la valeur", "Dkey": null, "NUM": 1 }
]
</span>
Comment les afficher en HTML et mettre en œuvre un travail d'édition et de suppression, qui implique une analyse json et un affichage hiérarchique des données :
Balise d'affichage HTML :
<ul id="msg" name="msg"> </ul>
JavaScript analyse les données et affiche :
Copiez le code comme suit :
<span style="font-size:14px;"> var réponse = xmlHttp.responseText;
eval("var result =" + réponse);
var len = result.Table.length;
si (len > 0) {
var msg = "";
pour (var je = 0; je < len; i++) {
msg += "<li><span>" + result.Table[i].Content + "</span>";
msg += "<span>" + result.Table[i].Akey + "</span>";
msg += "<span>" + result.Table[i].Bkey + "</span>";
msg += "<span>" + result.Table[i].Ckey + "</span>";
msg += "<span>" + result.Table[i].Dkey + "</span>";
msg += "<a href='###' onclick=/"editSub('" + result.Table[i].Id + "')/">Edit</a>";
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>Supprimer</a>";
msg += "</li>";
}
document.getElementById("msg").innerHTML = msg;
</span>
Chaque élément de données peut être traité via les fonctions editSub(id) et Delete(id) pour obtenir des fonctions similaires à ListBox.