如何把读取数据追加到html中（详细教程）

这篇文章主要给大家介绍了关于利用jquery如何从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>

参考安装文档：//www.jb51.net/zt/jquerydown.htm

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需要写在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签内）

<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(&#39;./result.json&#39;,function(result){
 var html_title=&#39;&#39;;
 var html_resultinfo=&#39;&#39;;
 
 html_title += &#39;<b>&#39;+result["title"]+&#39;</b>&#39;;
 $(&#39;#resultitle&#39;).after(html_title);
 $.each(result["resultinfo"],function(i,item){
 if(item["pass"]=="true") {
 html_resultinfo += &#39;<tr><td>&#39; + item[&#39;name&#39;] + &#39;</td>&#39; +
 &#39;<td>&#39; + item[&#39;moudle&#39;] + &#39;</td>&#39; +
 &#39;<td>&#39; + item["pass"] + &#39;</td>&#39; +
 &#39;<td>&#39; + item[&#39;onecepass&#39;] + &#39;</td>&#39; +
 &#39;<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>&#39;;
 html_resultinfo +=&#39;<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">&#39; + item[&#39;log&#39;] + &#39;</td></tr>&#39;;
 }
$(&#39;#infotitle&#39;).after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
 });
});
 
</script>




 

 

 

 

 

 

 

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何使用React Native 截屏组件（详细教程）

如何判断jQuery是否加载完成

如何使用mui back 实现返回刷新页面

Atas ialah kandungan terperinci 如何把读取数据追加到html中（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!