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. a标签不用点击模拟跳转url。

    因为请求到数据前要判断用户是否是登录状态, 所以就想页面数据请求成功,就跳转到登录页面, 就用了location.href = url. 结果因为同源策略不能访问, 没想到a标签竟然可以直接跳转这个U ...

  2. VS2010安装顽疾解决方法：error 25541 failed to open xml file

    一.问题描述 因为之前(2012)对HDFS客户端Thrift接口的库文件封装使用的是VS2010,最近考虑做一个完整的网盘系统的客户端,就把该库文件使用起来,比较悲剧的是之前做过操作系统的还原.我的 ...

  3. java web程序 登陆验证页面 4个页面人性化设置

    到这里,快期末考试了,老师不讲课,我心里有苦不想说,也许没有考虑到老师的感受,让老师难堪了 但是我的行为已不再是我可以做的了.不可能了,我只是职业性的机械的做事了. 思路: 1.第一个是form表单, ...

  4. [转]Excel.dll 导出Excel控制

    Excel.dll 导出Excel控制 2010-06-12 11:26 2932人阅读 评论(2) 收藏 举报 excelmicrosoftstring产品服务器google 最近做了个导出Exce ...

  5. 1005 Spell It Right （20 分）

    1005 Spell It Right (20 分) Given a non-negative integer N, your task is to compute the sum of all th ...

  6. Centos 6.5将光盘作为yum源的设置方法

    Centos 6.5将光盘作为yum源的设置方法 在使用Centos 的时候,用yum来安装软件包是再方便不过了,但是如果在无法连接互联网的情况下,yum就不好用了. 下面介绍一种方式,就是将Cent ...

  7. 浅谈在Java开发中的枚举的作用和用法

    枚举(enum),是指一个经过排序的.被打包成一个单一实体的项列表.一个枚举的实例可以使用枚举项列表中任意单一项的值.枚举在各个语言当中都有着广泛的应用,通常用来表示诸如颜色.方式.类别.状态等等数目 ...

  8. JedisCluster中应用的Apache Commons Pool对象池技术

    对象池技术在服务器开发上应用广泛.在各种对象池的实现中,尤其以数据库的连接池最为明显,可以说是每个服务器必须实现的部分.   apache common pool 官方文档可以参考:https://c ...

  9. docker容器修改时区（java应用log信息与标准容器时间有八个小时时间差）

    在docker容器中运行的java应用打出的日志时间和通过date -R方式获取的容器标准时间有八个小时时间差- 因为docker容器的原生时区为0时区,为了和国内时区保持一致,需要把容器时区调为东八 ...

  10. Android ffmpeg rtmp（source code）

    souce code: Android.mk 编译生成APK需要调用的so文件 LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODU ...