So hängen Sie Lesedaten an HTML an (ausführliche Anleitung)
Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von JQuery zum Lesen von Daten aus JSON und zum Anhängen an HTML ein. Freunde, die es brauchen, folgen Sie bitte dem Herausgeber, um einen Blick darauf zu werfen.
JSON-Format
JSON ist das am häufigsten verwendete Datenformat in Ajax und ist untrennbar mit der Kommunikation zwischen dem Browser und dem Server verbunden Es.
Beschreibung des JSON-Formats
Es ist wichtig zu beachten, dass Attributnamen in JSON in Anführungszeichen gesetzt werden müssen.
1. Laden Sie jquery herunter und installieren Sie es
Sie können die Online-Version von js mit der folgenden Methode einführen:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Weitere Informationen finden Sie in der Installationsdokumentation ://www.jb51.net/zt/jquerydown.htm
2. Bereiten Sie eine Datei im JSON-Format vor, das Suffix darf nicht .json sein
Das Folgende ist beispielsweise das Format von result.json
{
"title":"【UI测试结果】-转转2017/1/23 14:47",
"starttime":"2017/1/23 15:00 45",
"endtime":"2017/1/23 15:01 42",
"passcount":10,
"failurecount":5,
"resultinfo":[
{
"name":"发布",
"moudle":"Publish",
"pass":"true",
"onecepass":"true",
"log":"true"
},
{
"name":"登录",
"moudle":"Login",
"pass":"false",
"onecepass":"true",
"log":"asserterrorlog",
"failurereason":{
"errorlog":"asserterror",
"errorimg":"./登录.jpg"
}
}
]
}3. Erhalten Sie die Daten der Json-Datei über $.getJSON
Zum Beispiel das folgende Beispiel: Lesen Sie den Inhalt der Datei result.json und speichern Sie ihn in der Ergebnisvariablen. Das Ergebnis ist ein JSON-Format
$.getJSON('./result.json',function(result){}4. Übergeben Sie [$('#element id').after(html Content);] Fügen Sie HTML-Inhalt nach dem positionierten Element hinzu Elementpositionierungsmethode
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到classHTML-Inhaltsposition einfügen:
- append() – Inhalt am Ende des ausgewählten Elements einfügen
- prepend() – Inhalt einfügen an der Anfang des ausgewählten Elements
- after() – Inhalt nach dem ausgewählten Element einfügen
- before() – Inhalt vor dem ausgewählten Element einfügen
JSON-Objekt [Schlüssel] zum Lesen des Inhalts: result['title'], oder verwenden Sie den Objektwert von das Ergebnis.“title“
Array, dem $.each übergeben werden kann, um die Daten zu erhalten:
$.each(JSON array object, function (traverse index i, traverse object) { Betreiben Sie das durchquerte Objekt})
Result.json lesen, anhängen Der HTML-Code lautet wie folgt
(jquery muss im
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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
1393
52
1209
24
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
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.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
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.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
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.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
