<!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>
<button type="button" id="btn_display">表示</button>
<article class="list">
<div class="mes">京都の集合場所は<span class="pos"></span>、集合時間は<span class="time"></span>です。</div>
<div class="mes">大阪の集合場所は<span class="pos"></span>、集合時間は<span class="time"></span>です。</div>
<div class="mes">神戸の集合場所は<span class="pos"></span>、集合時間は<span class="time"></span>です。</div>
</article>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
let optval;
$(function(){
$('.list').css("display", "none");
$('#btn_display').on("click",function(){
$.post({
url: 'ajax_getLists.php',
}).done(function(datas){
$('.list').css("display", "block");
var i = 0;
$.each(datas, function(key, item){
$(".pos").eq(i).text(item.position);
$(".time").eq(i).text(item.ap_time);
i++;
})
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
})
})
})
</script>
</body>
</html>
$.postだけで全部取得できるのね。OK、使いやすそうです。
