首頁 > 開發者 > JavaScript

利用jquery如何從json中讀取資料追加到html中，jqueryjson

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

利用jquery如何從json中讀取資料追加到html中，jqueryjson

JSON 格式

json 是 Ajax 中使用頻率最高的資料格式，在瀏覽器和伺服器中之間的通訊可離不開它。

JSON 格式說明

需要特別注意的是，在 JSON 中的屬性名稱是需要使用引號引起來的。

1.下載安裝jquery

可通過下面的方法引入線上版本的js：

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

參考安裝文檔：http://www.bkjia.com/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需要寫在<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>

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More