這篇文章主要介紹了利用js讀取動態網站從服務器端返回的數據,需要的朋友可以參考下
在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請求：