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
Erweiterte Erklärung der Javascript-Funktionen
Inhaltsverzeichnis Funktionsdefinitionsmethode Fu...
Grundlegende Implementierungsmethode für die komponentenübergreifende Bindung mithilfe des V-Modells in Vue
Hallo allerseits, heute werden wir darüber sprech...
So erstellen Sie einen neuen Benutzer in CentOS und aktivieren die Schlüsselanmeldung
Inhaltsverzeichnis Neuen Benutzer anlegen Neue Be...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikelbeispiel wird der spezifische Co...
Aktivieren und Konfigurieren des MySQL-Protokolls für langsame Abfragen
Einführung Das MySQL-Protokoll für langsame Abfra...
So stellen Sie MongoDB-Container mit Docker bereit
Inhaltsverzeichnis Was ist Docker einsetzen 1. Zi...
Was sind die Unterschiede zwischen var let const in JavaScript
Inhaltsverzeichnis 1. Wiederholte Erklärung 1,1 v...
Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern in HTML
1. Erzwingen Sie keinen Zeilenumbruch und beenden ...
Kann Docker das nächste „Linux“ werden?
Das Linux-Betriebssystem hat das Rechenzentrum in...
Erweiterte Closures in JavaScript erklärt
Inhaltsverzeichnis 1. Das Konzept der Schließung ...
Grundlegendes zum MySQL-Abfrageoptimierungsprozess
Inhaltsverzeichnis Parser und Präprozessoren Abfr...
Detaillierte Erklärung zur Installation der PHP-Curl-Erweiterung unter Linux
Dieser Artikel beschreibt, wie man die PHP-Curl-E...
Lösung zur Definition der Mindestspannweite hat keine Auswirkung
Das Span-Tag wird häufig beim Erstellen von HTML-W...
CSS imitiert Fernbedienungstasten
Hinweis: Diese Demo wurde in der Miniprogrammumge...
Codeanalyse synchroner und asynchroner SetState-Probleme in React
React entstand als internes Projekt bei Facebook....