您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“js如何讀取json文件片段中的數(shù)據(jù)實(shí)例”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js如何讀取json文件片段中的數(shù)據(jù)實(shí)例”這篇文章吧。
在html中利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)進(jìn)行顯示
1、js.html 頁(yè)面
需要引入 執(zhí)行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數(shù)據(jù), //注意:info.json可以是不同類型文件,只要其中的數(shù)據(jù)為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方法:在每個(gè)匹配的元素之后插入內(nèi)容。 }); }); }); //注:可以是item.address,也可以是item['address'] //firefox報(bào) json文件中 “語(yǔ)法錯(cuò)誤 [”,單能加載數(shù)據(jù) //ie chrome 無(wú)法加載數(shù)據(jù) </script> <INPUT id=loaddata value=加載數(shù)據(jù) 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
應(yīng)用場(chǎng)景 :
定期從數(shù)據(jù)庫(kù)中讀取的特定記錄放到靜態(tài)頁(yè)面上去展示,為了減少對(duì)數(shù)據(jù)庫(kù)訪問(wèn)的壓力,把特定記錄數(shù)取出來(lái)存放在json中,頁(yè)面訪問(wèn)鏈接不用實(shí)時(shí)請(qǐng)求數(shù)據(jù)庫(kù)。
至此可以將json中的內(nèi)容加載到html靜態(tài)也中去。
-------------QA
顯示不了中文的確是編碼問(wèn)題,默認(rèn)保存的json肯定是個(gè)記事本,然后改后綴名為json的,記事本默認(rèn)編碼是ANSI的 顯示中文自然有問(wèn)題,
解決方法:打開(kāi).json文件 文件 - 另存為 看到下面編碼格式了吧 選擇UTF-8 就可以了。
這里還有個(gè)容易出錯(cuò)的地方:
請(qǐng)求json文件報(bào)405錯(cuò)誤,明明路徑對(duì)的 但是還是報(bào)錯(cuò)。
解決方法:修改請(qǐng)求方式為get請(qǐng)求。
以上是“js如何讀取json文件片段中的數(shù)據(jù)實(shí)例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。