Verwenden Sie JQuery, um Daten aus JSON zu lesen und sie an HTML anzuhängen, um die Methode zu implementieren

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. Der Artikel stellt sie ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert für jedermanns Studium oder Arbeit . Es braucht Freunde, werfen wir einen Blick darauf mit dem Herausgeber unten.

JSON-Format

Json ist das am häufigsten verwendete Datenformat in Ajax und die Kommunikation zwischen dem Browser und dem Server ist untrennbar damit verbunden.

JSON-Formatbeschreibung

Es ist wichtig zu beachten, dass Attributnamen in JSON in Anführungszeichen eingeschlossen 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>

Siehe Installation Dokumentation: http:// /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 result.json-Format

{
 "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 die Folgendes 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 Fügen Sie den HTML-Inhalt dem positionierten Element hinzu [$('#element id').after(html content);] Die folgende

Elementpositionierungsmethode

$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class

fügt die HTML-Inhaltsposition ein:

• append() – in Inhalt am Ende des ausgewählten Elements einfügen

• prepend() – Inhalt am Anfang einfügen das ausgewählte Element

• after() – Inhalt am Anfang des ausgewählten Elements einfügen Inhalt nach dem Element einfügen

• before() – Einfügen Inhalt vor dem ausgewählten Element

Json-Datenoperation

JSON-Objekt [Schlüssel] zum Lesen des Inhalts: result['title'], oder verwenden Sie result. "title"

Der Objektwert des Arrays, Sie können die Daten über $.each abrufen:

$.each (JSON-Array-Objekt, Funktion (Traversal-Index). i, Traversal Object) {Operation Traversed Object})

Result.json lesen, HTML anhängen Der Code lautet wie folgt

(jquery muss im < geschrieben werden ;script> tag)

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
//使用getJSON方法读取json数据,
//注意：info.json可以是不同类型文件，只要其中的数据为json类型即可
 $.getJSON('./result.json',function(result){
 var html_title='';
 var html_resultinfo='';
 
 html_title += '<b>'+result["title"]+'</b>';
 $('#resultitle').after(html_title);
 $.each(result["resultinfo"],function(i,item){
 if(item["pass"]=="true") {
 html_resultinfo += '<tr><td>' + item['name'] + '</td>' +
 '<td>' + item['moudle'] + '</td>' +
 '<td>' + item["pass"] + '</td>' +
 '<td>' + item['onecepass'] + '</td>' +
 '<td id="&#39; + item[&#39;moudle&#39;] + &#39;" class="collapsed" onclick="collapsedisplay(&#39; + item[&#39;moudle&#39;] + &#39;)"><u style="color: blue;">展开</u></td></tr>';
 html_resultinfo +='<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>';
 }
$('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
 });
});
 
</script>




 

 

 

 

 

 
 
 
 
 
 
 
 
用例名称
模块名称
是否成功
一次成功
详情
 

Verwandte Empfehlungen:

Von JSON Daten lesen und an HTML anhängen

Wie lese ich eine Datenbank-MySQL-Datei mit MATLAB?

Ein Beispiel dafür, wie man Daten dynamisch liest und den äußersten rechten Rand mit PHP löscht

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um Daten aus JSON zu lesen und sie an HTML anzuhängen, um die Methode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!