Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie aus JSON extrahierte Daten zu HTML hinzu

So fügen Sie aus JSON extrahierte Daten zu HTML hinzu

php中世界最好的语言
php中世界最好的语言Original
2018-03-15 16:15:298108Durchsuche

这次给大家带来如何从json提取的数据添加加到html中,从json提取的数据添加加到html中的注意事项有哪些,下面就是实战案例,一起来看一下。

JSON 格式

json 是 Ajax 中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它。

JSON 格式说明

需要特别注意的是,在 JSON 中的属性名是需要使用引号引起来的。

1.下载安装jquery

可通过下面的方法引入在线版本的js:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

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>标签内)</strong></p> <pre class="brush:php;toolbar:false"><!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"> &lt;script src=&quot;https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;&gt;&lt;/script&gt; <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="&#39; + item[&#39;moudle&#39;] + &#39;" class="collapsed" onclick="collapsedisplay(&#39; + item[&#39;moudle&#39;] + &#39;)"><u style="color: blue;">展开</u></td></tr>';  html_resultinfo +='<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>';  } $('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。  }); });   </script>

 

 

 

 

 

 

             
用例名称模块名称是否成功一次成功详情
 

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎么发掘空白处隐藏元素

怎样确认jQuery是否加载完毕

无new构建详解

手机触屏滑动拼音首字母选择城市

Das obige ist der detaillierte Inhalt vonSo fügen Sie aus JSON extrahierte Daten zu HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn