JSONデータ表示
JSONデータ表示
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>JSONデータ表示</title>
<!-- JSONデータ表示 -->
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/test9.js" type="text/Javascript"></script>
</head>
<body>
<form id=frm name=frm>
<input type="button" id="btnGetJsonData" value="データ取得" /><br />
一覧<div id="jsonDisplayArea"></div>
</form>
</body>
</html>
<!--
test9.js
//画面の起動時に呼びだされます
Event.observe( window, 'load', dispJsonData );
//呼び出すJSONデータの登録処理をします
function dispJsonData(){
//画面のボタン処理を実装します
Event.observe(
'btnGetJsonData',
'click',
function()
{
new Ajax.Request
(
'../data/kakaku.json',
{
method : 'get',
onSuccess : function(httpObject)
{
//受信したJSONデータを画面上の指定に表示します
$('jsonDisplayArea').innerHTML = jsonToTable(httpObject.responseText);
}
}
);
}
);
}
//受信したJSONデータの処理を実装します
function jsonToTable(jsonData)
{
var json = eval("(" + jsonData + ")");
var tbl = "<table>";
for(var i=0; i<json.products.length; i++)
{
tbl += "<tr>";
tbl += "<td>" + json.products[i].ID + "</td>";
tbl += "<td>" + json.products[i].Name + "</td>";
tbl += "<td>" + json.products[i].Price + "</td>";
tbl += "</tr>";
}
tbl += "</table>";
return tbl;
}
kakaku.json
{
"products" : [
{ "ID" : "A12345",
"Name" : "製品A",
"Price" : 100000
}
,
{ "ID" : "B12345",
"Name" : "製品B",
"Price" : 130000
}
,
{ "ID" : "C12345",
"Name" : "製品C",
"Price" : 150000
}
,
{ "ID" : "D12345",
"Name" : "製品D",
"Price" : 20000
}
]
}
--------------------------------------------------
-->
|
|