在html中利用js讀取動態網站從服務器端返回的數據進行顯示
1、js.html 頁面
需要引入執行jquery的js文件
複製代碼代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<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>
</HEAD>
<input type="button" value="加載數據" id="loaddata" />
<BODY>
<table id="infotable" >
<tr id="title"><th>姓名</th><th>性別</th><th>地址</th><th>主頁</th></tr>
</table>
</BODY>
</HTML>
info.json文件
複製代碼代碼如下:
[
{
"name":"zhangsan",
"sex":"man",
"address":"hangzhou",
"home":"http://www.zhangsan.com"
},
{
"name":"lisi",
"sex":"wumen",
"address":"beijing",
"home":"http://www.lisi.coms"
}
]
應用場景：
定期從數據庫中讀取的特定記錄放到靜態頁面上去展示，為了減少對數據庫訪問的壓力，把特定記錄數取出來存放在json中，頁面訪問鏈接不用實時請求數據庫。
至此可以將json中的內容加載到html靜態也中去。
顯示不了中文的確是編碼問題，默認保存的json肯定是個記事本，然後改後綴名為json的，記事本默認編碼是ANSI的顯示中文自然有問題，
解決方法：打開.json文件文件- 另存為看到下面編碼格式了吧選擇UTF-8 就可以了。
這裡還有個容易出錯的地方：
請求json文件報405錯誤，明明路徑對的但是還是報錯。
解決方法：修改請求方式為get請求：