Maison >interface Web >js tutoriel >Comment ajouter des données extraites de json en HTML
Comment ajouter des données extraites de json en HTML
- php中世界最好的语言original
- 2018-03-15 16:15:298150parcourir
Cette fois, je vais vous montrer comment ajouter des données extraites de json au html, et quelles sont les notes sur la façon d'ajouter des données extraites de json au html. Ce qui suit est un cas pratique, prenons. un coup d'oeil ensemble.
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>
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 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”)：定位到classInsé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é
Json opération de données
Objet JSON [clé] pour lire le contenu : result['title'], ou utiliser result."title"La valeur de l'objet du tableau, vous pouvez récupérez les données via $.each : $. each (objet tableau JSON, fonction (index de traversée i,objet de traversée ) {objet traversé opérationnel})
Lire result.json et ajoutez le code html comme suit(jquery doit être écrit dans la balise <script>)<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"> <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="' + item['moudle'] + '" class="collapsed" onclick="collapsedisplay(' + item['moudle'] + ')"><u style="color: blue;">展开</u></td></tr>'; html_resultinfo +='<tr id="' + item['moudle'] + 'info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>'; } $('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。 }); }); </script>
| 用例名称 | 模块名称 | 是否成功 | 一次成功 | 详情 |
|---|