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. [模板] KMP字符串匹配标准代码

    之前借鉴了某个模板的代码.我个人认为这份代码写得很好.值得一背. #include<bits/stdc++.h> using namespace std; const int N=1000 ...

  2. JbossMiner 挖矿蠕虫分析 （转载)

    前言 从2013年的诞生,到2016爆发,挖矿(MiningCryptocurrency) 的高回报率,使其成为了一把双刃剑.据外媒去年的统计,比特币的算力(Hash Rate)已在半年内翻了一翻. ...

  3. AppScan代理扫描app/H5安全测试(没试过，记录在此)

    标签: 1.首先设置AppScan代理,设置如下:

  4. Linux 期中架构 Ansible

    ansible  自动化软件   基于Python开发 特点概述: 配置文件不需要过多配置  了解就可以了 ###部署ansble软件 ##受控主机部署 backup   nfs01   web01 ...

  5. 特征选择：方差选择法、卡方检验、互信息法、递归特征消除、L1范数、树模型

    转载:https://www.cnblogs.com/jasonfreak/p/5448385.html 特征选择主要从两个方面入手: 特征是否发散:特征发散说明特征的方差大,能够根据取值的差异化度量 ...

  6. python的return self的用法

    转载:https://blog.csdn.net/jclian91/article/details/81238782 class foo: def __init__(self): self.m = 0 ...

  7. Android之sandbox技术

    ART 虚拟机下Hook工具:VirtualHook http://bbs.pediy.com/thread-216786.htm Github: https://github.com/rk700/V ...

  8. 如何分析 WindowsDump：Dump 起源与初始设置

    https://www.qcloud.com/community/article/511817 转者注:让我感觉以前看蓝屏都白看了~~~原来蓝屏也可以分析具体原因. 适用场景:Windows 系列系统 ...

  9. Helm 入门安装指南

    Helm 是 Kubernetes 生态系统中的一个软件包管理工具.本文将介绍 Helm 中的相关概念和基本工作原理,并通过一个具体的示例学习如何使用 Helm 打包.分发.安装.升级及回退 Kube ...

  10. django-媒体文件，图片存储

    1.settings.py # 媒体文件 MEDIA_ROOT = 'media/'