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

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

bootostrap5で、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;
});

Previous article

カメラモジュール libcamera