- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) >
- js如何讀取json文件片段中的數據實(shí)例
這篇文章主要為大家展示了“js如何讀取json文件片段中的數據實(shí)例”，內容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“js如何讀取json文件片段中的數據實(shí)例”這篇文章吧。
在html中利用js讀取動(dòng)態(tài)網(wǎng)站從端返回的數據進(jìn)行顯示
1、js.html 頁(yè)面
需要引入 執行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可以是不同類(lèi)型文件，只要其中的數據為json類(lèi)型即可
$.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方法:在每個(gè)匹配的元素之后插入內容。
});
});
});
//注:可以是item.address,也可以是item['address']
//firefox報 json文件中 “語(yǔ)法錯誤 [”,單能加載數據 //ie chrome 無(wú)法加載數據
</script>
<INPUT id=loaddata value=加載數據 type=button>
<TABLE id=infotable><TBODY><TR id=title><TH>姓名</TH><TH>性別</TH><TH>地址</TH><TH>主頁(yè)</TH></TR></TBODY></TABLE>info.json文件
[
{
"name":"jb51",
"sex":"man",
"address":"hangzhou",
"home":"https://www.jb51.net"
},
{
"name":"lisi",
"sex":"wumen",
"address":"beijing",
"home":"http://yulu.jb51.net"
}
]網(wǎng)上下載
jquery-1.8.2.min.js
應用場(chǎng)景 ：
定期從數據庫中讀取的特定記錄放到靜態(tài)頁(yè)面上去展示，為了減少對數據庫訪(fǎng)問(wèn)的壓力，把特定記錄數取出來(lái)存放在json中，頁(yè)面訪(fǎng)問(wèn)鏈接不用實(shí)時(shí)請求數據庫。
至此可以將json中的內容加載到html靜態(tài)也中去。
-------------QA
顯示不了中文的確是編碼問(wèn)題，默認保存的json肯定是個(gè)記事本，然后改后綴名為json的，記事本默認編碼是ANSI的 顯示中文自然有問(wèn)題，
解決方法：打開(kāi).json文件 文件 - 另存為 看到下面編碼格式了吧 選擇UTF-8 就可以了。
這里還有個(gè)容易出錯的地方：
請求json文件報405錯誤，明明路徑對的 但是還是報錯。
解決方法：修改請求方式為get請求。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系站長(cháng)郵箱：ts@56dr.com進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2 建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
