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:

Alle Schlüsselwerte sind rot markiert und weisen auf wichtige Parameter hin.
Werte werden in unterschiedlichen Farben markiert: numerische Werte sind orange, Zeichenfolgen grün und Boolesche Werte blau. . .

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

>>: Docker-Container sichert regelmäßig die Datenbank und sendet sie an das angegebene Postfach (Designidee)