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”)：定位到class

HTML-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