介绍 & lt; script https://www.yisu.com/zixun/src=" https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "> {
,“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"
,,}
,}
,)
} .getJSON美元(& # 39;。/result.json& # 39;,函数(结果){} (“# id"):美元定位到id,
$ (" p"):定位到标签p,其他标签同理
$ (" . class):定位到类 <李> & lt; ! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0,过渡//EN"比;
& lt; HTML>
& lt; HEAD>
& lt; TITLE>, New Document & lt;/TITLE>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=gb2312"比;
https://www.yisu.com/zixun/& lt; script src=" https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js ">
<>脚本
$(文档)时函数(){//使用getJSON方法读取json数据,//注意:info.json可以是不同类型文件,只要其中的数据为json类型即可
美元.getJSON (“。/result.json”,函数(结果){
var html_title=";
var html_resultinfo=";
html_title +=' +结果(“标题”)+“”;
$ (' # resultitle ')后(html_title);
美元each函数的结果(“resultinfo”),(我){
如果(项目(“通过”)==" true ") {
html_resultinfo +=' +项目(“名字”)+ +
“”+项目(“模组”)+ +
“”+项目(“通过”)+ +
“”+项目(“onecepass”) + +
' “+项目(“日志”)+“ ”;
}
$ (' # infotitle ')后(html_resultinfo);//之后方法:在每个匹配的元素之后插入内容。
})；
})；>
这篇文章主要介绍利用jquery从json中读取数据追加到html中的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强> json格式
json是Ajax中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它。
<强> json格式说明
需要特别注意的是,在json中的属性名是需要使用引号引起来的。
<强> 1。下载安装jquery
可通过下面的方法引入在线版本的js:
参考安装文档:https://www.jb51.net/zt/jquerydown.htm
<强> 2。准备一个json格式的文件,后缀可以不是. json
例如下面是result.json的格式
<强> 3。通过美元.getJSON获得Json文件的数据
例如下面的例子:读取结果。json文件的内容,存储到结果变量中,结果是一个json格式
<强> 4。通过【美元(& # 39;#元素id # 39;)后(html内容);】将html内容添加到定位到的元素后面
元素定位方式
插入html内容位置:
append()——在被选元素的结尾插入内容
<李>预谋()——在被选元素的开头插入内容
<李>后()——在被选元素之后插入内容
<李>之前()——在被选元素之前插入内容
<强> Json数据的操作
Json对象(例子)来读取内容:结果[& # 39;标题# 39;],或者用结果。”title"
数组的对象值,可以通过美元每人来获得数据:
. each美元(Json数组对象,函数(遍历索引我,遍历对象){操作遍历的对象})
读取result.json,追加html的代码如下
<强> (jquery需要写在& lt; script>标签内)
