首頁 > 開發者 > JavaScript
js讀取json檔案片段中的資料執行個體，jsjson
在html中利用js讀取動態網站從伺服器端返回的資料進行顯示
1、js.html 頁面
需要引入 執行jquery的js檔案
<HTML> <HEAD> <META name=Generator content=EditPlus> <META name=Author content=""> <META name=Keywords content=""> <META name=Description content=""> <script src="jquery-1.8.2.min.js"></script> <script> $(function(){ //$("#loaddata").click(function(){ $(document).ready(function(){ //使用getJSON方法讀取json資料, //注意：info.json可以是不同類型檔案，只要其中的資料為json類型即可 $.getJSON('info.json',function(data){ var html = ''; $.each(data,function(i,item){ html += '<TR><TD>'+item['name']+'</TD>'+ '<TD>'+item['sex']+'</TD>'+ '<TD>'+item.address+'</TD>'+ '<TD>'+item['home']+'</TD></TR>'; }); $('#title').after(html); //after方法:在每個匹配的元素之後插入內容。 }); }); }); //注:可以是item.address,也可以是item['address'] //firefox報 json檔案中 “語法錯誤 [”,單能載入資料 //ie chrome 無法載入資料 </script> <INPUT id=loaddata value=載入資料 type=button> <TABLE id=infotable><TBODY><TR id=title><TH>姓名</TH><TH>性別</TH><TH>地址</TH><TH>首頁</TH></TR></TBODY></TABLE>
info.json檔案
[ { "name":"jb51", "sex":"man", "address":"hangzhou", "home":"http://www.bkjia.com"}, { "name":"lisi", "sex":"wumen", "address":"beijing", "home":"http://yulu.jb51.net"} ]
網上下載
jquery-1.8.2.min.js
應用情境 ：
定期從資料庫中讀取的特定記錄放到靜態頁面上去展示，為了減少對資料庫訪問的壓力，把特定記錄數取出來存放在json中，頁面訪問連結不用即時請求資料庫。
至此可以將json中的內容載入到html靜態也中去。
-------------QA
顯示不了中文的確是編碼問題，預設儲存的json肯定是個記事本，然後改尾碼名為json的，記事本預設編碼是ANSI的 顯示中文自然有問題，
解決方案：開啟.json檔案 檔案 - 另存新檔 看到下面編碼格式了吧 選擇UTF-8 就可以了。
這裡還有個容易出錯的地方：
請求json檔案報405錯誤，明明路徑對的 但是還是報錯。
解決方案：修改請求方式為get請求。
以上這篇js讀取json檔案片段中的資料執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
