Fetch APIでPHPにデータを送信する方法

画面遷移をせず、ajaxでデータをPHPに渡す方法です。

下記は「ボタンをクリックした時にPHPにデータを渡す」処理についてのサンプルです。

Javascript

id="start"のボタンがあるとします。

index.html

<div class="Container">
   <button class="btn" id="start">start</button>
</div>

vanilla Javascriptでは、下記のように記述します。

main.js

start.addEventListener('click', () => {
        const postData = new FormData; // フォーム方式で送る場合
        postData.set('firstName', 'hoge'); // set()で格納する
        postData.set('lastName', 'fuga');
      
        const data = {
          method: 'POST',
          body: postData
        };
      
        fetch('test.php', data)
          .then((res) => res.text())
          .then(console.log);
    });

PHP

PHP側で、$_POST連想配列に値が保存されます。

test.php

<?php
echo $_POST['firstName']; // hoge

未対応の古いブラウザでもPolyfillを使用することで、従来のXMLHttpRequestを使った処理をfetchに置き換えることができます。

jQuery

ちなみにjQUeryにもajaxでPOSTできる構文があります。

test.js

 $.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
 });

プロジェクトによってはこちらを使用する事もあるかもしれません。

参考

github/fetch
MDN/Fetch API
MDN/Promise
jQuery.post()