So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie
|
JSON-Daten werden auf der HTML-Seite angezeigt und formatiert 1. Effektdiagramm anzeigen
Beschreibung:
2. Quellcode-Anzeige
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<Stil>
vor {Umriss: 1px durchgezogen #ccc; Polsterung: 5px; Rand: 5px; }
.string { Farbe: grün; }
.Nummer { Farbe: dunkelorange; }
.boolean { Farbe: blau; }
.null { Farbe: magenta; }
.key { Farbe: rot; }
.showinfo{
Position: absolut;
Hintergrundfarbe: #eef1f8;
Breite: 200px;
Polsterung: 5px;
Rahmenradius: 4px;
Rand: 1px durchgezogen #ccc;
Anzeige: keine;
}
.showinfo vor{
Polsterung: 5px;
Rand: 1px durchgezogen #ccc;
Rand: 0;
}
Tabelle,th,td{
Rand: 1px, durchgehend blau;
}
</Stil>
<script src="./js/jquery-1.8.3.min.js"></script>
<Skripttyp="text/javascript">
$(Dokument).bereit(Funktion(){
$(".show-rough").mouseover(Funktion(){
var left = $(this).offset().left + $(this).width() +20; //Div-Anzeigeposition berechnen var top = $(this).offset().top + 20;
var _jsonDate = $.parseJSON($(this).text());
var showJson = syntaxHighlight(_jsonDate);
$("#show-info").css({"left":links,"top":oben}).anzeigen();
$("#show-pre").html(showJson);
});
$(".show-rough").mouseout(Funktion(){
$("#show-info").hide().html();
$("#show-pre").html();
})
});
//JSON-Daten verarbeiten und mit regulären Ausdrücken Parameter unterschiedlichen Typs herausfiltern FunktionssyntaxHighlight(json) {
wenn (Typ von json != 'Zeichenfolge') {
json = JSON.stringify(json, nicht definiert, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, Funktion(Übereinstimmung) {
var cls = "Zahl";
wenn (/^"/.test(match)) {
wenn (/:$/.test(match)) {
cls = "Schlüssel";
} anders {
cls = "Zeichenfolge";
}
} sonst wenn (/true|false/.test(match)) {
cls = "Boolesch";
} sonst wenn (/null/.test(match)) {
cls = "null";
}
gibt '<span class="' + cls + '">' + Übereinstimmung + '</span>' zurück;
});
};
</Skript>
</Kopf>
<Text>
<Tabelle>
<Kopf>
<tr>
<th>Name</th>
<th>JSON-Daten</th>
</tr>
</thead>
<tbody>
<tr>
<td>Weiter</td>
<td class="show-rough">{ "Name": "小三", "Adresse": "Nr. 23 Beijing Road", "Alter": 16, "E-Mail": "[email protected]", "Objekt": [{"Position": "Manager"}], "del": [] }</td>
</tr>
<tr>
<td>Vertrauen</td>
<td class="show-rough">{ "Name": "Xiao Si", "Adresse": "Nr. 01 Shanghai Road", "Alter": 27, "E-Mail": "[email protected]", "Objekt":[],"del":[] }</td>
</tr>
</tbody>
</Tabelle>
<div id="show-info" class="showinfo">
<vorherige ID="zeigen-vorher">
</pre>
</div>
</body>
</html>3. Quellcode hochladen Adresse zum Herunterladen des Quellcodes Dies ist das Ende dieses Artikels zum Anzeigen und Formatieren von JSON-Daten auf HTML-Seiten. Weitere relevante Inhalte zum Anzeigen und Formatieren von JSON auf HTML-Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Node-Skript realisiert automatische Anmelde- und Lotteriefunktion
Artikel empfehlen
Vue simuliert die Warenkorb-Abrechnungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Verbesserung der Erfahrung und gemeinsame Nutzung des interaktiven Designs von 163 Mailbox-Anmeldefeldern
Ich habe im LOFTER-Wettbewerb gesehen, dass erwähn...
Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute
Inhaltsverzeichnis Was ist die Listener-Eigenscha...
Abkürzung für HTML DOCTYPE
Wenn Ihr DOCTYPE wie folgt ist: Code kopieren Der ...
Element-ui klickt direkt auf die Zelle in der Tabelle, um sie zu bearbeiten
Inhaltsverzeichnis Ergebnisse erzielen Implementi...
Analyse des Unterschieds zwischen Emits und Attrs in Vue3
Inhaltsverzeichnis abschließend Praxisanalyse Erw...
Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)
Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...
Detaillierte Erklärung und Beispiele der MySQL-Isolationsebene
Inhaltsverzeichnis 4 Isolationsebenen von MySQL E...
Einführung in den Installationsprozess von MySQL 8.0 in einer Linux-Umgebung
Inhaltsverzeichnis Vorwort 1. Linux ändert die Yu...
Zusammenfassung der grundlegenden Verwendung des $-Symbols in Linux
Linux-Version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
Detaillierte Erläuterung der geplanten Aufgaben für normale Benutzer unter Linux
Vorwort Normale Benutzer definieren geplante Cron...
So verkleinern Sie das Stammverzeichnis des XFS-Partitionsformats in Linux
Inhaltsverzeichnis Vorwort Systemumgebung Aktuell...
Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS
Verwendung von Clip-Pfaden Polygon Der Wert setzt...
Führen Sie die folgenden Schritte aus, damit Docker Images abrufen kann
1. Docker Pull zieht das Image Wenn Sie zum Abruf...
Die beste Lösung zum Zurücksetzen des Root-Passworts von MySQL 8.0.23
Diese Methode wurde am 7. Februar 2021 bearbeitet...