So erhalten Sie JSON-Daten über JS in HTML
In diesem Artikel erfahren Sie hauptsächlich, wie Sie JSON über Javascript analysieren, die Daten abrufen und sie dann zu HTML hinzufügen. Freunde in Not können darauf zurückgreifen.
Beim Schreiben von Seiten mit sich wiederholendem Inhalt und sich wiederholender Logik kann die Verwendung von JSON-Daten die Programmiereffizienz erheblich verbessern und die spätere Datenpflege erleichtern. Daher müssen auf der Videothemenseite mehrere Spalten mit Videodaten angezeigt werden, und ich habe mich für die Verwendung von JSON entschieden.
Der HTML-Code lautet wie folgt (nur die wichtigsten Teile werden angezeigt, JQ muss in Anführungszeichen gesetzt werden)
<p class="container-fluid content "> <p class="container neirong"> <p class="left fl"> <p class="title"> 热门视频 </p> <p class="medialist"> </p> </p></p> </p>
Der JS lautet wie folgt
<script> $(document).ready(function(){ console.log(1111) $.getJSON('data.json',function(data){ console.log(222) var mediahtml=""; $.each(data,function(i,data) { mediahtml+='<p class="media">'+ '<p class="media-left">'+ '<a data-toggle="modal" data-target="#myModal">'+ '<img class="media-object" src="'+data["imgsrc"]+ '" alt="">'+ '</a>'+'</p>'+ '<p class="media-body">'+ '<p class="title">'+ '<span class="classify">'+ data["classify"]+ '</span>'+ '<span class="titlename media-heading">'+ data['titlename']+ '</span>'+ '</p>'+ '<span class="time">'+ '<span class="glyphicon glyphicon-time"></span> '+ '<span>'+data['pubdate']+'</span>'+ '<p>'+data["intro"]+'</p>'+ '<p class="guest">'+ '<span class="jia">嘉</span>'+ '<span class="name">'+data["name"]+'</span>'+ '<span class="position">'+data["position"]+'</span>'+ '<span class="glyphicon glyphicon-eye-open"></span>'+ '<span class="click-rite"></span>'+ '</p>'+ '</p>'+ '<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+ '<p class="modal-dialog" role="document">'+ '<p class="modal-content">'+ '<p class="modal-header">'+ '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+ '<span aria-hidden="true">×</span>'+ '</button>'+ '</p>'+ '<p class="modal-body"></p>'+ '</p>'+ '</p>'+ '</p>' // var url_mobi=data.url_mobi; // var url_pc=data.url_pc; // if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) { // $('.modal-body').prepend(url_mobi); // }else{ // $('.modal-body').prepend(url_pc); // } // // }) $('.medialist').after(mediahtml); }) }) $('#myModal').on('shown.bs.modal', function (e) { // 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零 $(this).css('display', 'block'); var modalHeight = $(window).height() / 2 - $('#myModal .modal-dialog').height() / 2; $(this).find('.modal-dialog').css({ 'margin-top': modalHeight }); }); //点击预览图时判断 // $('.modal').on('click', function () { // if ($('#myModal').css("display") == "none") { // $('.modal-body').children('iframe').attr('src', ''); // } else { // $('.modal-body').children('iframe').attr('src', // 'https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0'); // } // }) </script>
Sie können den Kommentarteil ignorieren , und es wird keinen Einfluss auf den Inhalt haben.
Erstellen Sie zunächst eine neue JSON-Datei. Das Problem, auf das Sie bei JSON-Dateien achten müssen, besteht darin, dass JSON Anforderungen an das Datenformat stellt und verschiedene Symbole in der URL nicht erkennt, sodass ein Fehler angezeigt wird . Wenn es nicht repariert wird, wird der JS-Prozess blockiert, was dazu führt, dass die Daten nicht auf der Seite angezeigt werden. Es hat lange gedauert, bis ich dieses Problem gefunden habe, und das JSON-Problem meldet keinen Fehler. Die Lösung besteht darin, die URL mit der Encode-Methode zu formatieren und sie dann zu JSON hinzuzufügen. Sie sollten auch Decode verwenden, um sie wieder in HTML zu konvertieren.
Die zweite Gefahr besteht darin, HTML in ein bestimmtes Tag einzufügen. Es gibt vier Methoden, die Sie verwenden können.
Der dritte Punkt ist, dass Sie beim Spleißen der Saiten nicht vergessen müssen, dass es lange dauern wird, ein kleines Problem zu finden. Darüber hinaus meldet JS beim Spleißen keinen Fehler.
Oben erfahren Sie, wie Sie JSON-Daten abrufen und laden.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So verwenden Sie Javascript, um die Anzeige von QQ-Space-Fotoalben zu implementieren
Über den Schleifenmechanismus von js-Ereignissen (ausführlich Tutorial)
Über den JS-Sortieralgorithmus – Zusammenfassung
Wie man einen Kegel mit JS+Canvas erstellt
Das obige ist der detaillierte Inhalt vonSo erhalten Sie JSON-Daten über JS in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
