jquery lit les données json et les utilise en HTML

Cette fois, je vais vous apporter jquery pour lire les données json et les utiliser en html. Quelles sont les précautions pour que jquery lise les données json et les utilise en html. jetez un oeil une fois.

Format JSON

json est le format de données le plus fréquemment utilisé en Ajax, et la communication entre le navigateur et le serveur en est indissociable.

Description du format JSON

Il est important de noter que les noms d’attributs en JSON doivent être mis entre guillemets.

1. Téléchargez et installez jquery

La version en ligne de js peut être introduite via la méthode suivante :

<script></script>

Référez-vous à la documentation d'installation : http://www.jb51.net/zt/jquerydown.htm

2. Préparez un fichier au format json, le suffixe ne peut pas être .json

Par exemple, voici le format de 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. Obtenez les données du fichier Json via $.getJSON

Par exemple, l'exemple suivant : Lisez le contenu du fichier result.json et stockez-le dans la variable result Le résultat est au format json

$.getJSON('./result.json',function(result){}

. 4. Ajoutez le contenu html derrière l'élément positionné via [$('#element id').after(html content);]

Méthode de positionnement des éléments

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

Insérer la position du contenu HTML :

• append() - Insérer du contenu à la fin de l'élément sélectionné

• prepend() - Insérer du contenu au début de l'élément sélectionné

• after() - À Insérer du contenu après l'élément sélectionné

• before() - Insérer du contenu avant l'élément sélectionné

Opérations sur les données Json

Objet JSON [clé] pour lire le contenu : result['title'], ou utiliser result."title"

La valeur objet du tableau peut être obtenue via $.each :

$.each (objet tableau JSON, fonction (index de parcours i, objet de parcours ) {objet traversé par opération})

Le code pour lire result.json et ajouter du HTML est le suivant

(jquery doit être écrit dans la balise <script>)</script>

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">




<script></script>
<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;&#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;&#39; +
 &#39;<td>&#39; + item[&#39;moudle&#39;] + &#39;&#39; +
 &#39;<td>&#39; + item["pass"] + &#39;&#39; +
 &#39;<td>&#39; + item[&#39;onecepass&#39;] + &#39;&#39; +
 &#39;<td id="&#39; + item[&#39;moudle&#39;] + &#39;" class="collapsed" onclick="collapsedisplay(&#39; + item[&#39;moudle&#39;] + &#39;)"><u style="color: blue;">展开&#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;&#39;;
 }
$(&#39;#infotitle&#39;).after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
 });
});
 
</script>



 

 

 
 
 

 

             

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

 

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez. faites attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment jQuery contrôle dynamiquement les éléments de la page

Comment jquery configure le webpack

Étapes détaillées de l'accordéon du panneau pliant pour l'opération jQuery EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!