<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<select id="sel">
<option> --場所を選ぶ-- </option>
<option value="kyoto">京都</option>
<option value="osaka">大阪</option>
<option value="kobe">神戸</option>
</select>
<div id="mes">
集合場所は<span id="pos"></span>
集合時刻は<span id="time"></span>
</div>
<script>
const url = "ajax_getData.php";
let selid = document.getElementById('sel');
selid.addEventListener('change', function(){
let optval = selid.options[selid.selectedIndex].value;
let param = new URLSearchParams();
param.append("opt",optval);
fetch(url, {
method: "post",
body: param,
}).then(response => {
if(response.ok){
let promise = response.json();
promise.then(data =>{
document.getElementById('pos').innerHTML = data.position;
document.getElementById('time').innerHTML = data.ap_time;
})
} else {
alert("request failed");
}
})
})
</script>
</body>
</html>
なるほど。。。
ajaxの取得をtime intervalで数秒ごとに取るようにして表示すれば良いのか。
ほぼほぼロジックも出来たので背景処理のところだな
