Comment ajouter des données lues au HTML (tutoriel détaillé)

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 en détail à travers un exemple de code, qui a une certaine valeur de référence pour l'étude ou le travail de chacun. amis qui en ont besoin, veuillez suivre l'éditeur pour y jeter un œil.

Format JSON

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

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>

Document d'installation de référence : //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 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 : lire le contenu du fichier result.json et le stocker dans la variable result Le résultat est au format json

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

.

4. Passer [$('#element id ').after(html content);】Ajouter du contenu html après l'élément positionné

Méthode de positionnement des éléments

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

Insérer la position du contenu html :

• append() - Insérer le 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ération de données Json

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

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

$.each (objet tableau JSON, fonction (index de traversée i, objet de traversée) {faire fonctionner l'objet traversé})

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

(jquery doit être écrit dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a)

<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(&#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>




 

 

 

 

 

 

 

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser le composant de capture d'écran React Native (tutoriel détaillé)

Comment juger si jQuery est chargé

Comment utiliser mui back pour revenir actualiser la page

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!