Beispielcode für die HTML-Formatierung von JSON
|
Ohne weitere Umschweife werde ich den Code direkt für Sie posten. Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script>
<Skripttyp="text/javascript">
var json = {"hey": "Typ", "eine Nummer": 243,"anobject": {"whoa": "verrückt", "anarray": [1,2,"drei<h1>ee"],"anotherarray": [1, 2], "mehr": "Zeug"},"super": wahr,"falsch": falsch,"Bedeutung": null, "japanisch": "明日がある。", "link": "http://jsonview.com", "nichtLink": "http://jsonview.com ist großartig"};
$(Funktion() {
$('#json').JSONView(json);
$('#collapse-btn').on('klicken', function() {
$('#json').JSONView('zusammenklappen');
});
$('#expand-btn').on('klicken', function() {
$('#json').JSONView('erweitern');
});
$('#toggle-btn').on('klicken', function() {
$('#json').JSONView('umschalten');
});
$('#toggle-level1-btn').on('klicken', function() {
$('#json').JSONView('umschalten', 1);
});
$('#toggle-level2-btn').on('klicken', function() {
$('#json').JSONView('umschalten', 2);
});
});
</Skript>
</Kopf>
<Text>
<br/>
<button id="collapse-btn">Zusammenklappen</button>
<button id="expand-btn">Erweitern</button>
<button id="toggle-btn">Umschalten</button>
<button id="toggle-level1-btn">Ebene 1 umschalten</button>
<button id="toggle-level2-btn">Ebene 2 umschalten</button> <div id="json"></div>
</body>
</html>Wie in der Demo gezeigt, wird das formatierte JSON angezeigt Oben sehen Sie den vom Herausgeber eingeführten Beispielcode für HTML-formatiertes JSON. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Aktivieren oder Deaktivieren des GTID-Modus in MySQL online
Artikel empfehlen
JS implementiert die Benutzerregistrierungsschnittstellenfunktion
In diesem Artikelbeispiel wird der spezifische JS...
Zusammenfassung der Anwendungsbereiche von Kubernetes
Kubernetes ist aufgrund seiner Anwendungsportabil...
Drei Arten des HTML+CSS-Layouts (natürliches Layout/fließendes Layout/positioniertes Layout)
1. Natürliches Layout <br />Das Layout ohne ...
So verwenden Sie SVG-Symbole in WeChat-Applets
SVG wurde in den letzten Jahren aufgrund seiner v...
Alibaba Cloud ESC Server Docker-Bereitstellung von Single Node Mysql
1. Laden Sie die beschleunigte Version von msyql ...
Tutorial-Diagramm zur VMware-Installation des Centos8-Systems (chinesischer Grafikmodus)
Inhaltsverzeichnis 1. Software- und Systemabbild ...
So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist
Apache Tika ist eine Bibliothek zur Dateityperken...
Sind die Wertebereiche von int(3) und int(10) in MySQL gleich?
Inhaltsverzeichnis Frage: Antwort: Wirklichkeit: ...
Detaillierter Prozess der Installation verschiedener Software in Docker unter Windows
1. MySQL installieren # Laden Sie MySQL im Docker...
Lösen Sie das Problem, nachdem Sie --subnet zum Docker-Netzwerk hinzugefügt haben.
Nachdem Sie –subnet zum Erstellen des Docker-Netz...
Konfigurieren von MySQL und Squel Pro auf dem Mac
Als Reaktion auf die Popularität von nodejs haben...
HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts
In diesem Artikel wird hauptsächlich die Implemen...
Detaillierte Schritte zur Installation des NERDTree-Plugins in Vim unter Ubuntu
NERDTree ist ein Dateisystembrowser für Vim. Mit ...
Bringen Sie Ihnen den detaillierten Prozess der Verwendung von Docker zum Erstellen der chinesischen Version der Gitlab-Community bei
1. Verwenden Sie Docker Compose, um den Start zu ...
So verwenden Sie Dockerfile zum Erstellen von Images in Docker
Erstellen des Images Früher haben wir verschieden...