modalとfetchでphpから非同期な表示

最近、使用頻度が高いのが。
ページ推移せず、スクロールも少なく。
同一画面上で次々モーダルなカードを開き非同期にphpからのデータ処理を表示していくという方法。
いわばシングルページの横着か。

bootostrap５で、javascriptはjqueryは使わない。ajaxにはfetchを使う。

modal起動側

ボタン : <button type=”button” class=”btn btn-secondary” data-bs-toggle=”modal” data-bs-target=”#exampleModal”>モーダルボタン</button>
アンカータグ : <a class=”modal-open” href=”#” data-bs-toggle=”modal” data-bs-target=”#exampleModal”>モーダルリンク </a>

bootstrap以後はdata-bs-toggle= data-bs-target= と-bs-が入っている。toggleとtargetが必須。

modal本体

　<div class=”modal fade” id=”modal-1″ tabindex=”-1″ role=”dialog” aria-labelledby=”modal-1″ aria-hidden=”true”>
　　<div class=”modal-dialog” role=”document”>
　　　<div class=”modal-content”>
　　　　<div class=”modal-header”>
　　　　　<button type=”button” class=”btn-close” data-bs-dismiss=”modal” aria-label=”Close”> </button>
　　　　</div>
　　　　<div class=”modal-body”>
　　　　　<p id=”result”></p>
　　　　</div>
　　　　<div class=”modal-footer”>
　　　　　<button type=”button” class=”btn btn-secondary tojiru” data-bs-dismiss=”modal” value=”1″>閉じる</button>
　　　</div>
　　</div>
　</div>

※<p id=”result”></p>にfetchで非同期な表示をする。

FetchでPHPと非同期なアクセス

従来ajaxとしてはJqueryが多く使われてきたが、最近はfetchやaxiosが主に使われている。
axiosはLaravelにも使われているのでLaravelの項で扱うとして、fetchを取り上げる。

Javacriptヘデータを渡す

HTML5のdata属性の利用:

<div id=”num” data-id=”3″></div>
// Javascript
const numdata = document.getElementById(‘num’);
let id = numdata.getAttribute(‘data-id’);
let data = new URLSearchParams();
data.append(‘id’, id);

FormDataを使って一括データ渡し:

<form id=”myform” style=”margin:10px;”>
　<input type=”hidden” name=”work” value=”パン屋” />
　<input type=”hidden” name=”age” value=”30″ />
　<input type=”hidden” name=”nickname” value=”kent” />
　<div id=”link” style=”margin-top:20px;”><a href=”#” data-bs-toggle=”modal” data-bs-target=”#modal-form”>モーダルフォーム-my&lt/a>　</div>
</form>
// Javascript
document.getElementById(‘link’).addEventListener(‘click’, function (e) {
　let data = new FormData(document.getElementById(‘myform’));

ファンクションの引数に依る:

// Javascript
function fetchgo(id, name){
　let data = new URLSearchParams(); //ファンクションパラメタをurlの引数にする
　data.append(‘id’, id);
　data.append(‘name’, name);

fetchからPOSTでphpと受け渡し

// Javascript
fetch(‘post.php’, {
　　method: ‘POST’,
　　body: data,
})
.then(function (response) {
　　return response.text();
})
.then(function (text) {
　document.getElementById(‘resultForm’).textContent = text;
});