<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>6-03_ajax</title>
<link href="../../_common/images/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
<link href="../../_common/css/style.css" rel="stylesheet">
<style>
.list {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
.list h2 {
margin: 0 0 2em 0;
font-size: 16px;
text-align: center;
}
.seminar {
float: left;
margin: 10px 10px 10px 0;
border: 1px solid #23628f;
padding: 4px;
width: 25%;
}
.check {
margin: 0;
padding: 8px;
font-size: 12px;
color: #ffffff;
background-color: #23628f;
text-align: center;
cursor: pointer;
}
.red {
background-color: #e33a6d;
}
.green {
background-color: #7bc52e;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>空き席状況をチェック</h1>
<h2>JSONファイルの読み込み</h2>
</div><!-- /.container -->
</header>
<main>
<div class="container">
<section>
<ul class="list">
<li class="seminar" id="js">
<h2>JavaScript勉強会</h2>
<p class="check">空き席状況を確認</p>
</li>
<li class="seminar" id="security">
<h2>セキュリティ対策講座</h2>
<p class="check">空き席状況を確認</p>
</li>
<li class="seminar" id="aiux">
<h2>AIを利用したUX設計</h2>
<p class="check">空き席状況を確認</p>
</li>
</ul>
</section>
</div><!-- /.container -->
</main>
<footer>
<div class="container">
<p>JavaScript Samples</p>
</div><!-- /.container -->
</footer>
<script src="../../_common/scripts/jquery-3.4.1.min.js"></script>
<script>
'use strict';
$(document).ready(function() {
//ファイルの読み込み
$.ajax({url: 'data.json', dataType: 'json'})
.done(function(data) {
data.forEach(function(item, index) {
console.log(item);
});
})
.fail(function() {
window.alert('読み込みエラー');
});
});
</script>
</body>
</html>
KAOKA Daisuke