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. sql 防注入 维基百科

    http://zh.wikipedia.org/wiki/SQL%E8%B3%87%E6%96%99%E9%9A%B1%E7%A2%BC%E6%94%BB%E6%93%8A SQL攻击(SQL inj ...

  2. linux 重新设置memsql密码

    先登陆服务器,找到自己的my.cnf文件,通常会在 /etc目录下(如果不在,可以用find / -name my.cnf命令找一下),然后使用 vi my.cnf 命令编辑该文件(建议先备份),在[ ...

  3. jenkins持续集成3

    1.安装Pipeline插件,并初识 1.启动Jenkins,打开浏览器http://localhost:8080,系统管理,用户名:chenshanju/123456 2.系统管理-插件管理,安装p ...

  4. java-appium-527进阶-1 UiAutomator1&2区别和封装

    1.UiAutomator和UiAtumator2的区别: 1.1 UiAutomator1有关于id定位的策略 UiAutomator1 id定位在resourceid匹配失败时,会匹配conten ...

  5. 在win7/WINDOWS SERVER 2008 R2上安装 vmware POWERcli 6.5

    安装.NET Framework 4.6.2下载NDP462-KB3151800-x86-x64-AllOS-ENU.exe,安装安装PowerShell 4.0(5.0依赖4.0)下载Windows ...

  6. NVMe on RHEL7

    原文地址https://www.dell.com/support/article/cn/zh/cnbsd1/sln312382/nvme-on-rhel7?lang=en Posted on beha ...

  7. Java技术栈

    内容: 1.Java基础(JavaSE) 2.数据结构与算法与设计模式 3.计算机理论知识 4.数据库 5.Java web(JavaEE) 6.消息队列 7.Linux及服务器相关 8.分布式相关 ...

  8. UVA439-水题

    题意:一只棋盘上的马,从一个点到另外一个点要走多少步 解法:广搜 #include<stdio.h> #include<iostream> #include <strst ...

  9. stdio.h头文件中申明的基本函数

    调用scanf函数时,需传入变量的地址作为参数,scanf函数会等待标准输入设备(键盘等)输入数据,并且将输入的数据赋值给地址对应的变量. #include<stdio.h> #inclu ...

  10. 《汇编语言 基于x86处理器》前五章的小程序

    ▶ 书中前五章的几个小程序,基本的运算操作,使用了作者的库 Irvine32 和 Irvine64(一开始以为作者网站过期了,各网站上找到的文件大小都不一样,最后发现是要搭梯子 Orz,顺利下载).注 ...