Utilisez jquery pour lire les données de json et ajoutez-les au HTML pour implémenter la méthode

Cet article vous présente principalement les informations pertinentes sur la façon d'utiliser jquery pour lire des données à partir de json et les ajouter au HTML. L'article les présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. . C'est nécessaire les amis, jetons un oeil avec l'éditeur ci-dessous.

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

Vous pouvez introduire la version en ligne de js via la méthode suivante :

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

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

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

Par exemple, ce qui suit est le format 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, le exemple suivant : lire le contenu du fichier result.json et le stocker dans Dans la variable result, le résultat est au format json

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

4 Ajouter le contenu html à l'élément positionné via. [$('#element id').after(html content);] La

méthode de positionnement d'élément suivante

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

insère la position du contenu html :

• append() - in 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 le contenu au début de l'élément sélectionné Insérer le contenu après l'élément

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

Opération de données Json

Objet JSON [clé] pour lire le contenu : résultat['titre'], ou utilisez le résultat. "titre"

La valeur de l'objet du tableau, vous pouvez obtenir les données via $.each :

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

Lire result.json, ajouter html Le code est le suivant

(jquery doit être écrit dans le < ;script>)

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




 

 

 

 

 

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

Recommandations associées :

À partir de JSON, lisez les données et ajoutez-les au HTML

Comment lire le fichier Mysql d’une base de données avec MATLAB ?

Un exemple de la façon de lire dynamiquement des données et d'effacer la marge la plus à droite en utilisant php

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!