1.下载安装jquery
 
可通过下面的方法引入在线版本的js：
 
 
2.准备一个json格式的文件，后缀可以不是.json
例如下面是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.通过$.getJSON获得Json文件的数据
例如下面的例子：读取result.json文件的内容，存储到result变量中，结果是一个json格式
$.getJSON('./result.json',function(result){}
 
4.通过【$('#元素id').after(html内容);】将html内容添加到定位到的元素后面
元素定位方式
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class
 
插入html内容位置：
  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
 
Json数据的操作
JSON对象[key]来读取内容：result['title’]，或者用result.”title"
 
数组的对象值，可以通过$.each来获得数据：
$.each(JSON数组对象,function(遍历索引i，遍历对象){操作遍历的对象})
 
读取result.json，追加html的代码如下
(jquery需要写在<script>标签内）
 
<!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>
</HEAD>
<BODY>
<div style="margin-top: 30px">
    <div style="font-size: 30px;text-align: center">
        <p id="resultitle" ></p>
    </div>
    </div>
    <div id="resultinfo" style="clear: both;padding-top: 30px">
        <table style="width: 1080px">
            <tr id="infotitle">
                <th style="width:360px">用例名称</th>
                <th style="width:200px">模块名称</th>
                <th style="width:180px">是否成功</th>
                <th style="width:180px">一次成功</th>
                <th style="width:160px">详情</th></tr>
        </table>
    </div>

</div>
</BODY>
</HTML>

 
 

通过jquery,从json中读取数据追加到html中的更多相关文章

  1. 从JSON中读取数据追加到HTML中

    本文来自https://www.jianshu.com/p/04127d74d88c,并非本人原创,只是作为自己学习使用的资料,如有浏览者请点击地址自行到原作者页面浏览 有时候我们需要将json数据直 ...

  2. Flink 使用（一）——从kafka中读取数据写入到HBASE中

    1.前言 本文是在<如何计算实时热门商品>[1]一文上做的扩展,仅在功能上验证了利用Flink消费Kafka数据,把处理后的数据写入到HBase的流程,其具体性能未做调优.此外,文中并未就 ...

  3. Jmeter从数据库中读取数据

    Jmeter从数据库中读取数据 1.测试计划中添加Mysql Jar包 2.添加线程组 3.添加 jdbc connection configuration 4.添加JDBC Request,从数据库 ...

  4. c和c++中读取数据的方式总结

    目录 c 输出 printf() 输入 scanf getchar(), putchar() gets(), puts() c++ 输入 cin() getline() get() 输出 cout 最 ...

  5. 从多个XML文档中读取数据用于显示webapi帮助文档

    前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...

  6. ffmpeg 从内存中读取数据（或将数据输出到内存）

    更新记录(2014.7.24): 1.为了使本文更通俗易懂,更新了部分内容,将例子改为从内存中打开. 2.增加了将数据输出到内存的方法. 从内存中读取数据 ffmpeg一般情况下支持打开一个本地文件, ...

  7. 程序一 用记事本建立文件src.dat，其中存放若干字符。编写程序，从文件src.dat中读取数据，统计其中的大写字母、小写字母、数字、其它字符的个数，并将这些数据写入到文件test.dat中。

    用记事本建立文件src.dat,其中存放若干字符.编写程序,从文件src.dat中读取数据,统计其中的大写字母.小写字母.数字.其它字符的个数,并将这些数据写入到文件test.dat中. #inclu ...

  8. java从文件中读取数据然后插入到数据库表中

    实习工作中,完成了领导交给的任务,将搜集到的数据插入到数据库中,代码片段如下: static Connection getConnection() throws SQLException, IOExc ...

  9. 实验三：将读取数据功能从Repository中分离

    先理解下面这段话之后再开始做实验 经过实验二的改造之后,我们代码有一点结构的概念了: Listing.aspx:向Repository要Products,然后将得到的Products在页面中显示出来. ...

随机推荐

  1. c#数据类型 与sql的对应关系 以及 取值范围

    Short Name .NET Class Type Width Range (bits) SQL Datatype (Closest Match) Constraint to use (if nee ...

  2. 新玩具，React v16.7.0-alpha Hooks

    周五看见React v16.7.0-alpha Hooks,今早起来看见圈里已经刷屏了Hooks,正好周末,正好IG和G2的比赛还没开始,研究下... 刚刚接触react时候非常喜欢用函数式组件,因为 ...

  3. configure: error: You need a C++ compiler for C++ support.

    安装pcre包的时候提示缺少c++编译器 报错信息如下: configure: error: You need a C++ compiler for C++ support. 解决办法,使用yum安装 ...

  4. HTML5中对于网络是否断开的检测.很有意思哦

    //事件的封装 var EventUtil = { addHandler: function (element, type, handler) {//注册事件 if (element.addEvent ...

  5. kudu和kudu-impala的安装流程

    安装apache的kudu 第一步:下载rpm包 http://archive.cloudera.com/kudu/redhat/6/x86_64/kudu/5.11.0/RPMS/x86_64/ 第 ...

  6. 基于Linux的Samba开源共享解决方案测试（四）

    对于客户端的网络监控如图: 双NAS网关100Mb码率视音频文件的稳定读测试结果如下: 100Mb/s负载性能记录 NAS网关资源占用 稳定写 稳定写 CPU空闲 内存空闲 网卡占用 NAS1 8个稳 ...

  7. Spring中的ThreadPoolTaskExecutor

      在观察线上系统的运行情况下,发现在错误日志中有这类错误信息,org.springframework.core.task.TaskRejectedException,于是便对ThreadPoolTa ...

  8. python之Web服务器案例

    HTTP协议简介 1. 使用谷歌/火狐浏览器分析 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来.而浏览器和服务器之间的传输协议是HTTP,所以: ...

  9. C常用问题

    linux系统,gcc编译器包含引用的头文件位置

  10. CUDA C Programming Guide 在线教程学习笔记 Part 5

    附录 A,CUDA计算设备 附录 B,C语言扩展 ▶ 函数的标识符 ● __device__,__global__ 和 __host__ ● 宏 __CUDA_ARCH__ 可用于区分代码的运行位置. ...