This time I will show you how to add the data extracted from json to html, and how to add the data extracted from json to html. What are the precautions?The following is a practical case, let’s take a look together take a look.
JSON format
json is the most frequently used data format in Ajax, and is inseparable from the communication between the browser and the server. Open it.
JSON format description
It is important to note that attribute names in JSON need to be enclosed in quotation marks.
1. Download and install jquery
You can introduce the online version of js through the following method:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2. Prepare a file in json format, the suffix may not be .json
For example, the following is the format of 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. Obtain the data of the Json file through $.getJSON
For example, the following example: read the content of the result.json file and store it in the result variable. The result is a json format
$.getJSON('./result.json',function(result){}4. Add the html content behind the positioned element through [$('#element id').after(html content);]
Element positioning method
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到classInsert html content position:
append() - Insert content at the end of the selected element
prepend() - Insert content at the beginning of the selected element
after() - Insert content after the selected element
before() - Insert content before the selected element
Json data operation
JSON object [key] to read the content: result['title'], or use the object value of the result."title"
array, you can get the data through $.each:
$.each(JSON array object,function( Traverse index i, Traverse object){Operation traversed object})
Read result.json and append html code as follows
(jquery needs to be written In the <script> tag) </strong></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">
<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>
| 用例名称 | 模块名称 | 是否成功 | 一次成功 | 详情 |
|---|