快捷導(dǎo)航

利用js讀取動態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)

更新時間：2014年02月10日 15:11:23 作者：

這篇文章主要介紹了利用js讀取動態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù),需要的朋友可以參考下

在html中利用js讀取動態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)進(jìn)行顯示

1、js.html 頁面

需要引入執(zhí)行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數(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方法:在每個匹配的元素之后插入內(nèi)容。 
}); 
}); 
}); 

//注:可以是item.address,也可以是item['address'] 
//firefox報 json文件中 “語法錯誤 [”,單能加載數(shù)據(jù) 
//ie chrome 無法加載數(shù)據(jù) 
</script> 
</HEAD> 
<input type="button" value="加載數(shù)據(jù)" id="loaddata" /> 

<BODY> 
<table id="infotable" > 
<tr id="title"><th>姓名</th><th>性別</th><th>地址</th><th>主頁</th></tr> 
</table> 
</BODY> 
</HTML> 

info.json文件

復(fù)制代碼代碼如下:

 
[ 
{ 
"name":"zhangsan", 
"sex":"man", 
"address":"hangzhou", 
"home":"http://www.zhangsan.com" 
}, 
{ 
"name":"lisi", 
"sex":"wumen", 
"address":"beijing", 
"home":"http://www.lisi.coms" 
} 
] 

應(yīng)用場景：

定期從數(shù)據(jù)庫中讀取的特定記錄放到靜態(tài)頁面上去展示，為了減少對數(shù)據(jù)庫訪問的壓力，把特定記錄數(shù)取出來存放在json中，頁面訪問鏈接不用實時請求數(shù)據(jù)庫。

至此可以將json中的內(nèi)容加載到html靜態(tài)也中去。

顯示不了中文的確是編碼問題，默認(rèn)保存的json肯定是個記事本，然后改后綴名為json的，記事本默認(rèn)編碼是ANSI的顯示中文自然有問題，

解決方法：打開.json文件文件 - 另存為看到下面編碼格式了吧選擇UTF-8 就可以了。

這里還有個容易出錯的地方：
請求json文件報405錯誤，明明路徑對的但是還是報錯。
解決方法：修改請求方式為get請求：