でた！h1のmarginのつきぬけ
昨日やったのがもう出るとは縁起がいい
h1 marginをとったらぴたっとした
エラーでものすごく横長の巨大バス出現
飛行機か
flex-wrap:wrap;
これを入れると折れ曲がる
この一行が抜けていた
上側にだけ角丸を入れてバスっぽくする
ここまで
seat.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>座席予約</title>
<link rel="stylesheet" href="css/style.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<header>
<h1>本日、明日、明後日のバスの予約</h1>
<img src="car_bus.png">
</header>
<div id="container">
<p>
<select id="ymd">
<option value="">日付の選択</option>
<option value="2020-03-14">2020-03-14</option>
<option value="2020-03-15">2020-03-15</option>
<option value="2020-03-16">2020-03-16</option>
</select>
</p>
<div id="front">進行方向↑</div>
<div id="bus">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p id="end"><button id="b1">決定</button></p>
</div>
<script src="js/seat.js"></script>
</body>
</html>
style.css
body{
background-color: #eee;
margin:0;
padding:0;
}
h1{
margin:0;
padding:0;
}
header{
margin: 0 auto;
text-align:center;
background-color: #ccc;
}
header img{
width:100px;
}
#container{
width: 80%;
margin: auto;
}
#front{
text-align:center;
/*border: solid 1px #555;*/
padding: 1rem;
border-radius: 2rem 2rem 0 0;
background-color: #fff;
}
#bus{
background-color: #fff;
display:flex;
flex-wrap:wrap;
box-sizing: border-box;
padding: 1rem;
}
#bus div{
width: 22.5%;
line-height: 3;
text-align:center;
box-sizing: border-box;
border: solid 1px #555;
background: #fff;
margin:1rem 0;
}
#bus div:nth-child(4n+2){//0+2で2つめの右、4+2で6つめの右･･･とスペースを入れる
margin-right: 10%;
}
#end{
text-align: center;
}
get_seat.php
<?php
if(empty($_GET["ymd"])){
exit();
}
require_once("../config.php");
$sql="SELECT * from seats WHERE ymd=:ymd";
$stmt = $pdo->prepare($sql);
$stmt->bindValue(":ymd",$_GET["ymd"],PDO::PARAM_STR);
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($data);//api
echo $json;//こっそりみにいくがechoしてないと見れない
?>
http://localhost/php/makino/highwaybus/api/get_seat.php?ymd=2020-03-14
を入力
さてapiをつくってからajaxをしましょう
seat.js
呼び出すきっかけとしてセレクトの値が変化したときをトリガーにしたい
ajax通信をするのはセレクトが変化したとき
チェンジイベントが起きたときに実行
$('#ymd').on('change',function(){
});
$.ajaxのパーツは3つ
①通信情報。オブジェクトとして渡す
オブジェクトなんで丸括弧の中に中かっこを書いておく
②成功の場合
データが戻ってくるはずなのでとりあえずdとかてきとうなのに入れる。名前は何でもいい。
③失敗の場合
構造はこうなる
$('#ymd').on('change',function(){
$.ajax({})
.done(function(d){
})
.fail(function(){
});
});
①のオブジェクトの中身
1.どこと通信するのか カンマで区切る
2.通信タイプ カンマで区切る
3.パラメータ。複数のときもある
ほんとはわかりやすいシステムを作るときは
y,m,dをちぎって別々に送ってあとでくっつける
というのは
うっかり区切り文字を-じゃなくて/にするとか
日本語を挟むとかいうのがいるかもしれない
今回はやらないけど
パラメータが1つでもオブジェクトとしてわたす
よって｛｝でくるむ
javascriptで#ymdのとこのvalueをとってきてくださいという
data:{'ymd':$('#ymd').val()},
4.どのタイプの通信か
とりあえずここまで
seat.js
$(function(){
//console.log("hoge");
$('#ymd').on('change',function(){
$.ajax({
url:'api/get_seat.php',
type:'get',
data:{'ymd':$('#ymd').val()},
dataType:'json',
})
.done(function(d){
console.log(d);
})
.fail(function(){
alert('NG');
});
});
});
