快捷導(dǎo)航

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

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

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

在html中利用js讀取動(dòng)態(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方法:在每個(gè)匹配的元素之后插入內(nèi)容。 
}); 
}); 
}); 

//注:可以是item.address,也可以是item['address'] 
//firefox報(bào) json文件中 “語法錯(cuò)誤 [”,單能加載數(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)用場(chǎng)景：

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

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

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

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

這里還有個(gè)容易出錯(cuò)的地方：
請(qǐng)求json文件報(bào)405錯(cuò)誤，明明路徑對(duì)的但是還是報(bào)錯(cuò)。
解決方法：修改請(qǐng)求方式為get請(qǐng)求：