Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie JQuery Daten aus JSON liest und an HTML anhängt

小云云
Freigeben: 2017-12-07 15:43:27
Original
2471 Leute haben es durchsucht

jQuery ist eine browserübergreifende JavaScript-Bibliothek, die Operationen zwischen HTML und JavaScript vereinfacht. In praktischen Anwendungen führt die direkte Verwendung der Funktion json_encode() dazu, dass die chinesischen Zeichen in der Form „u***“ codiert werden. Dieses Problem wurde seit PHP5.4 gelöst um das Problem der Kodierung chinesischer Schriftzeichen zu lösen. In diesem Artikel stellen wir Ihnen hauptsächlich die relevanten Informationen zur Verwendung von JQuery zum Lesen von Daten aus JSON und zum Anhängen an HTML vor.

JSON-Format

JSON ist das am häufigsten verwendete Datenformat in Ajax für die Kommunikation zwischen Browsern und Servern ohne 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>
Nach dem Login kopieren


Siehe 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"
  }
 }
 ]
}
Nach dem Login kopieren


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(&#39;./result.json&#39;,function(result){}
Nach dem Login kopieren


4. Fügen Sie HTML-Inhalt nach dem positionierten Element durch [$('# element id').after(html content);]

Elementpositionierungsmethode


$("#id"):定位到id,
$(“p"):定位到标签p,其他标签同理
$(“.class”):定位到class
Nach dem Login kopieren


HTML-Inhaltsposition einfügen:

  • append() – Inhalt am Ende ausgewählter Elemente einfügen

  • prepend() – Inhalt am Anfang ausgewählter Elemente einfügen. Content

  • after() – Inhalt nach dem ausgewählten Element einfügen

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

Json-Datenoperation

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 (Index i durchqueren, Objekt durchqueren) {Operation durchquertes Objekt})

Lesen Sie result.json und hängen Sie den HTML-Code wie folgt an

(jquery muss im <script>-Tag geschrieben werden) </strong><br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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(&#39;./result.json&#39;,function(result){ var html_title=&#39;&#39;; var html_resultinfo=&#39;&#39;; html_title += &#39;<b>&#39;+result["title"]+&#39;</b>&#39;; $(&#39;#resultitle&#39;).after(html_title); $.each(result["resultinfo"],function(i,item){ if(item["pass"]=="true") { html_resultinfo += &#39;<tr><td>&#39; + item[&#39;name&#39;] + &#39;</td>&#39; + &#39;<td>&#39; + item[&#39;moudle&#39;] + &#39;</td>&#39; + &#39;<td>&#39; + item["pass"] + &#39;</td>&#39; + &#39;<td>&#39; + item[&#39;onecepass&#39;] + &#39;</td>&#39; + &#39;<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>&#39;; html_resultinfo +=&#39;<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">&#39; + item[&#39;log&#39;] + &#39;</td></tr>&#39;; } $(&#39;#infotitle&#39;).after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。 }); }); </script>

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

Nach dem Login kopieren

Zusammenfassung der Methode von JQuery zum Abrufen von Elementen

jQuery lädt eine HTML-Seite in das angegebene p

JS-Methode zum Lesen und Parsen von JSON-Daten

Das obige ist der detaillierte Inhalt vonWie JQuery Daten aus JSON liest und an HTML anhängt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage