Beispiel einer JSON-Ausgabe im HTML-Format (Testschnittstelle)
|
Um die JSON-Daten in einem schönen eingerückten Format anzuzeigen, können Sie die einfachste Funktion JSON.stringify verwenden, da diese Funktion am Ende zwei ungewöhnliche Parameter hat. Siehe die Beschreibung auf MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify. Der Beispielcode lautet wie folgt:
<html>
<Kopf>
<meta charset="utf-8" />
<title>hallo</title>
<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; }
</Stil>
<Skripttyp="text/javascript">
Funktion SyntaxHighlight(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>
<pre id="Ergebnis">
</pre>
<Skripttyp="text/javascript">
var songResJson = {
"Dienst": "ALLE",
"qt": 581,
"Inhalt": {
"Antwort": {
"song": "Wenn das Schicksal nur so lange währt, bis wir uns treffen",
"Album": "Wenn das Schicksal nur so lange währt, bis wir uns treffen",
"Künstler": "Wu Qilong Yan Yidan",
"Bild-URL": "upload/2022/web/5921969627395387.jpg"
},
"Szene": "Musik"
}
}
document.getElementById('Ergebnis').innerHTML = syntaxHighlight(songResJson);
// $('#result').html(syntaxHighlight(songResJson));
</Skript>
</body>
</html>
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Informationen zu benutzerdefinierten Überwachungselementen und Triggern von Zabbix
>>: Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0
Artikel empfehlen
Ubuntu installiert scrcpy, um die Bildschirmprojektion und -steuerung des Mobiltelefons abzuschließen (eine weitere Möglichkeit, QQ WeChat in Ubuntu zu verwenden).
Scrcpy-Installation snap install scrcpy Installat...
Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)
Öffnen Sie eine beliebige Webseite, zum Beispiel ...
Funktionen in TypeScript
Inhaltsverzeichnis 1. Funktionsdefinition 1.1 Fun...
Mehrere Methoden zum Löschen von Floating (empfohlen)
1. Fügen Sie ein leeres Element desselben Typs hi...
So ändern Sie schnell das Hostattribut eines MySQL-Benutzers
Wenn Sie sich remote bei MySQL anmelden, gelten f...
So installieren Sie die Linux-Onlinesoftware gcc online
Befehle zur Linux-Onlineinstallation: yum install...
Zusammenfassung der Wissenspunkte zur MySQL-Architektur
1. Datenbanken und Datenbankinstanzen Beim Studiu...
Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS
Verwendung von Clip-Pfaden Polygon Der Wert setzt...
jQuery implementiert einen prozentualen Fortschrittsbalken
In diesem Artikel wird der spezifische Code von j...
Einfache Implementierung von HTML zum Erstellen eines persönlichen Lebenslaufs
Lebenslauf-Code: XML/HTML-CodeInhalt in die Zwisc...
Lösung für den MySQL-Dienstfehler 1067: Ändern Sie den Pfad der ausführbaren MySQL-Datei
Heute bin ich auf das MySQL-Dienstfehlerproblem 1...
Detaillierte Ansicht versteckter Spalten in MySQL
Inhaltsverzeichnis 1. Primärschlüssel vorhanden 2...
MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung
1. MHA Durch die Überwachung des Masterknotens ka...
So verwenden Sie den EXPLAIN-Befehl in SQL
Bei unserer täglichen Arbeit führen wir manchmal ...
mysql-5.7.28 Installations-Tutorial unter Linux
1. Laden Sie die Linux-Version von der offizielle...