jquery如何从json中读取数据追加到html中

小云云
Lepaskan: 2017-12-07 15:43:27
asal
2478 orang telah melayarinya

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。实际应用中,当有中文字符时,当直接使用json_encode() 函数会使汉字编码成"\u***"的形式,自从php5.4起 已经解决这个问题,使用以下方法解决汉字被编码的问题。本文我们主要给大家介绍了关于利用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>
Salin selepas log masuk


参考安装文档:http://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"
  }
 }
 ]
}
Salin selepas log masuk


3.通过$.getJSON获得Json文件的数据

例如下面的例子:读取result.json文件的内容,存储到result变量中,结果是一个json格式


$.getJSON(&#39;./result.json&#39;,function(result){}
Salin selepas log masuk


4.通过【$('#元素id').after(html内容);】将html内容添加到定位到的元素后面

元素定位方式


$("#id"):定位到id,
$(“p"):定位到标签p,其他标签同理
$(“.class”):定位到class
Salin selepas log masuk


插入html内容位置:

  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

Json数据的操作

JSON对象[key]来读取内容:result['title'],或者用result.”title"

数组的对象值,可以通过$.each来获得数据:

$.each(JSON数组对象,function(遍历索引i,遍历对象){操作遍历的对象})

读取result.json,追加html的代码如下

(jquery需要写在<script>标签内)</strong><br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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(&#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>

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

Salin selepas log masuk

JQuery获取元素的方法总结

jQuery加载一个html页面到指定的p里面

js读取和解析JSON数据的方法

Atas ialah kandungan terperinci jquery如何从json中读取数据追加到html中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan