HTML で js を使用して、動的 Web サイトのサーバー側から返されたデータを読み取って表示します
1. js.html ページ
には、jquery
を実行する js ファイルを導入する必要があります。
新しいドキュメント
説明" CONTENT="">
<script> <br><br> $(function(){ <br>//$("#loaddata").click(function(){ <br>$(document).ready(function(){ <br>// getJSON メソッドを使用して読み取りますjson データ、<br>//注 : info.json は、その中のデータが json 型 <br>$.getJSON('info.json',function(data){ <br>var html = ''; <br>$.each(data,function(i,item){ <br>html = '<tr><td>' item['name'] '< ;/td>' <br>'<td>' '</td>' <br>'<br>' <td>' item['home'] ' </td></tr>'; <br>$('#title').after(html); /after メソッド: 一致する各要素コンテンツの後に挿入します。 <br>}); <br>}); <br><br>//注: item.address または item['address'] <br>//firefox レポートの構文エラー [" JSON ファイルでは、データはロードのみ可能です<br>//ie chrome はデータをロードできません<br></script>
名前性別 | ホームページ |
info.json ファイル
コードをコピーします
コードは次のとおりです:
"自宅":"http://www.zhangsan.com"
},
{
"名前":"lisi",
" 性別": "wumen",
"住所":"北京",
"自宅":"http://www.lisi.coms"
}
]
応用シナリオ:
データベースから定期的に読み取られる特定のレコードを静的ページに配置して表示することで、データベースへのアクセス負荷を軽減します。特定のレコードの数を取り出して、ページ アクセス リンクに保存します。リアルタイムでデータベースをリクエストする必要はありません。
これで、json のコンテンツを静的 html に読み込むことができます。
中国語を表示できないのは、確かにエンコーディングの問題です。デフォルトで保存される json は Notepad である必要があり、その場合、Notepad のデフォルトのエンコーディングは ANSI に変更されます。中国語の表示に問題があります。
解決策: .json ファイルを開き、名前を付けて保存し、下の UTF-8 を選択してください。
ここにもエラーが発生しやすい場所があります。
json ファイルをリクエストすると 405 エラーが報告されます。パスは明らかに正しいですが、それでもエラーが報告されます。
解決策: リクエストを取得するようにリクエスト メソッドを変更します。