【JavaScript】fetchでPOSTデータを送信する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptのfetchでPOSTデータを送信する方法をご紹介しています。

JavaScriptのfetchでPOSTデータを送信するにはどうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

fetchとは

fetchは、非同期にネットワーク上のリソースを取得することができるAPIです。XMLHttpRequestの代替となるもので、よりシンプルに、より詳細に非同期による通信が実現できます。

参考:https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

fetchでPOSTデータを送信する

fetchでPOSTデータを送信するサンプルです。動作確認のためのサンプルとなっています。本番環境でfetchを使用する場合はHeaders等を指定する必要がありますので、その点ご了承ください。

HTML

<form>
    <label>
        <span>名前:</span>
        <input type="text" name="fullname" value="TARO TANAKA">
    </label>
    <label>
        <span>メールアドレス:</span>
        <input type="email" name="email" value="test@example.co.jp">
    </label>
    <button type="button">送信</button>
</form>

JavaScript

const btn = document.querySelector('button');
const form = document.querySelector('form');

btn.addEventListener('click', ()=>{

    const formData = new FormData(form);

    fetch('fetch.php', {
        method: 'POST',
        body: formData,
    })
    .then(response =>  response.text())
    .then(data => {
        console.log(data);
    });
});

PHP(fetch.php)

<?php

if($_POST){

    $fullname = filter_input(INPUT_POST, 'fullname');
    $email = filter_input(INPUT_POST, 'email');

    echo "名前:{$fullname}\n";
    echo "メールアドレス:{$email}";

}

実行結果

名前:TARO TANAKA
メールアドレス:test@example.co.jp

最後に

fetchと同様に非同期にリソースを取得することができるモジュールにaxiosがあります。直感的に操作することができる点から非同期通信ではaxiosが採用されるケースが多いですが、fetchはブラウザに標準搭載されているAPIのため、思い立ったときに気軽に試すことができます。少し癖があるAPIですが、今後も開発が進められるAPIだと思いますので、一通りの使用方法に慣れておくと良いかもしれませんね。

以上、JavaScriptのfetchでPOSTデータを送信する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら