index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>サンプル</title>
</head>
<body>
<table>
<tr>
<td><input type="text" id="name" value=""/></td>
</tr>
</table>
<table>
<tr>
<td><input type="button" id="disp" value="表示" onClick="getJson()"/></td>
<td><input type="button" id="dispList" value="リスト表示" onClick="getJsonList()"/></td>
</tr>
</table>
<ul id="output"></ul>
</body>
</html>
common.js
function getJson() {
var fruits= {
"name" : "ぶどう",
"number" : "10"
};
$("#output").append("<li>" + fruits.name + "（" + fruits.number + "個）</li>");
}
function getJsonList() {
var fruits= [{
"name" : "ぶどう",
"number" : "10"
},
{
"name" : "りんご",
"number" : "20"
},
{
"name" : "みかん",
"number" : "30"
}];
for(var i = 0; i < fruits.length; i++){
$("#output").append("<li>" + fruits[i].name + "（" + fruits[i].number + "個）</li>");
}
}
0コメント