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
MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten
1. Abfragegeschwindigkeit von zwei Abfrage-Engine...
Grafisches Tutorial zur Installation und Konfiguration von mysql5.7.19 winx64 (win10)
Das Installationstutorial für MySQL 5.7.19 Winx64...
Detailliertes Tutorial zur Installation von Docker auf CentOS 7.5
Einführung in Docker Docker ist eine Open-Source-...
Detaillierte Erklärung zur Verwendung von $emit in Vue.js
1. Übergeordnete Komponenten können Props verwend...
MySQL 8.0.12 – Schnellinstallations-Tutorial
Die Installation von MySQL 8.0.12 dauerte zwei Ta...
Javascript zum Erzielen eines Trommeleffekts
In diesem Artikel wird der spezifische Code von J...
Ein unverzichtbarer Karriereplan für Webdesigner
Originalartikel, bei Nachdruck bitte Autor und Qu...
Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu
Vor einiger Zeit hat der Blogger das Ubuntu-Syste...
JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts
JavaScript-Umschalteffekt für Bekleidungsalben (ä...
So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot
Inhaltsverzeichnis 1. Installation von JDK1.8 unt...
Detaillierte Erklärung zur Verwendung der Linux-Umleitung
Ich glaube, dass jeder manchmal Daten kopieren un...
Detaillierte Erklärung von JavaScript Reduce
Inhaltsverzeichnis Karte Filter manche jeder Inde...
Erläuterung der MySQL-Leistungsprüfung durch den Befehl „show processlist“
Der Befehl „show processlist“ ist sehr nützlich. ...
Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird
In diesem Artikel wird hauptsächlich erläutert, w...
Vue verwendet GraphVis, um einen unendlich erweiterten Beziehungsgraphen zu entwickeln
1. Gehen Sie zur offiziellen GraphVis-Website, um...