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