萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 利用js讀取動態網站從服務器端返回的數據

利用js讀取動態網站從服務器端返回的數據

 這篇文章主要介紹了利用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請求: 
copyright © 萬盛學電腦網 all rights reserved