JSを使用して、HTMLにJSを使用してサーバーから返されたデータを読み取り、表示します
1。Js.htmlページ
jQuery JSファイルを導入する必要があります
次のようにコードコードをコピーします。
<
<html>
<head>
<Title>新しいドキュメント</title>
<Meta name = "general" content = "editplus">
<Meta name = "Author" content = "">
<Meta name = "keywords" content = "">
<メタ名= "説明" content = "">
<スクリプトsrc = "jquery-1.8.2.min.js"> </scrip>
<スクリプト>
$（function（）{
// $（ "#loaddata"）。
$（docume）.ready（function（）{{）{
// getJSONメソッドを使用してJSONデータを読み取り、
//注：info.jsonは、データがJSONタイプである限り、ファイルの種類が異なる場合があります。
$ .getjson（ 'info.json'、function（data）{
var html = '';
$ .each（data、function（i、item）{
html+= '<ted>'+item ['name']+'</td>'+
'<td>'+item ['sex']+'</td>'+
'<td>'+item.Address+'</td>'+
'<td>'+item ['home']+'</td> </tr>';
}）;
$（ '#title'）。
//メソッド後：一致する各要素の後にコンテンツを挿入します。
}）;
}）;
}）;
//注：item.addressにすることも、['address']にすることができます。
// firefoxは「json file ["の文法エラー["」と報告しています。データのみをロードできます
// IE Chromeはデータをロードできません
</script>
</head>
<入力型= "ボタン"値= "データの読み込み" id = "loaddata" />
<body>
<表ID = "INFOTABLE">
<tr id = "title"> <th> name </th> <th> gender </th> <th>アドレス</th> <th> homepage </th> </tr>
</table>
</body>
</html>
info.jsonファイル
次のようにコードコードをコピーします。
[
{{
「名前」：「Zhangsan」、
「セックス」：「男」、
「住所」：「Haangzhou」、
「ホーム」：「http://www.zhangsan.com」
}、
{{
「名前」：「lisi」、
「セックス」：「ウーメン」、
「住所」：「北京」、
「ホーム」：「http：//www.lisi.coms ""
}
]
アプリケーションシナリオ：
データベースのアクセスの圧力を減らすために、定期的に表示される特定のレコードを静的ページに配置します。リアルタイムで。
この時点で、JSONの内容をHTML staticにロードできます。
実際には、デフォルトのJSONを表示できないコーディングの問題であり、接尾辞を変更します。
解決策：.JSONファイルを開き、次のエンコード形式を表示します。
ここで間違いを犯すのが簡単な場所もあります：
JSONファイルに405のエラーを報告するようにリクエストします。明らかにパスは正しいですが、それでもエラーを報告します。
解決策：リクエストメソッドを変更してリクエストを取得します。