Heim  >  Artikel  >  Web-Frontend  >  jquery liest JSON-Daten und verwendet sie in HTML

jquery liest JSON-Daten und verwendet sie in HTML

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 14:08:081766Durchsuche

Dieses Mal bringe ich Ihnen JQuery zum Lesen von JSON-Daten und deren Verwendung in HTML. Was sind die Vorsichtsmaßnahmen für JSON-Daten und deren Verwendung in HTML? Schauen Sie einmal vorbei.

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 gesetzt werden müssen.

1. Laden Sie jquery herunter und installieren Sie es

Die Online-Version von js kann mit der folgenden Methode eingeführt werden:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Weitere Informationen finden Sie in der Installationsdokumentation: 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 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. Rufen Sie die Daten der Json-Datei über $.getJSON ab

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. Fügen Sie den HTML-Inhalt hinter dem positionierten Element durch [$('#element id').after(html content);]

hinzu Elementpositionierungsmethode

$("#id"):定位到id,
$(“p"):定位到标签p,其他标签同理
$(“.class”):定位到class
Fügen Sie die Position des HTML-Inhalts ein:

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

  • prepend() – Inhalt am Anfang des ausgewählten Elements einfügen
  • after() - Bei Inhalt nach dem ausgewählten Element einfügen
  • before() - Inhalt vor dem ausgewählten Element einfügen

Json-Datenoperationen

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

Der Objektwert des Arrays kann über $.each abgerufen werden:

$.each (JSON-Array-Objekt, Funktion (Durchlaufindex i,

Durchlaufobjekt ) {Betreiben des durchquerten Objekts})

Der Code zum Lesen von result.json und zum Anhängen von HTML lautet wie folgt

(jquery muss im <script>-Tag geschrieben werden)<strong></strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> &lt;script src=&quot;https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;&gt;&lt;/script&gt; <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>

 

 

 

 

 

 

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie jQuery Seitenelemente dynamisch steuert

Wie jQuery das Webpack konfiguriert

jQuery EasyUI-Bedienung, Faltpanel-Akkordeon, detaillierte Schritte

Das obige ist der detaillierte Inhalt vonjquery liest JSON-Daten und verwendet sie in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn