jQuery ($.getJSON)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
var con = $.getJSON("chapter693.json",
function(data){
$("div").html("<ul></ul>");
$.each(data.root.type1, function(key,val){
$("div ul")
.append("<li>" + val + "</li>")
});
});
con = null;
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
変更前
</div>
</body>
</html>
jQuery ($.ajax)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$.ajax({
url: 'chapter693.json',
dataType: 'json',
success:function(data){
$("div").html("<ul></ul>");
$.each(data.root.type1, function(key,val){
$("div ul").append("<li>" + val + "</li>")
});
}
});
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
変更前
</div>
</body>
</html>
JSON
{
"root": {
"type1": {
"data1": "テキスト1",
"data2": "テキスト2",
"data3": "テキスト3"
},
"type2": {
"data1": "テキスト1",
"data2": "テキスト2",
"data3": "テキスト3"
},
"type3": {
"data1": "テキスト1",
"data2": "テキスト2",
"data3": "テキスト3"
}
}
}