XMLHttpRequestでフォームに入力されたデータを送信する

XMLHttpRequestでフォームに入力された内容をサーバーへ送信する

ページのフォームで入力された内容をサーバーに送信するときは、XMLHttpRequestオブジェクトとFormDataオブジェクトを組み合わせて使います。

XMLHttpRequestオブジェクトでサーバーにリクエスト（要求）を送信するsendメソッドを実行するときに、フォームの入力値をセットしたFormDataオブジェクトをパラメータに指定するとフォームの入力された内容を送信することができます。

以下の例では、ページに4つの入力項目「氏名」「性別」「年齢」「個人情報保護方針」があるフォームで入力されたデータをサーバーに送信します。
ここでは入力項目の値をあらかじめvalue属性やchecked属性で指定してしまいます。

HTML コード例

<article id="content1">
  <h1>JavaScriptレシピ</h1>
  <form method="post" action="">
    <div>
      <label for="input_name">氏名</label>
      <input id="input_name" type="text" name="input_name" value="佐藤 花子">
    </div>
    <div>
      <label for="gender">性別</label>
      <label for="input_male">男性<input id="input_male" type="radio" name="input_gender" value="1"></label>
      <label for="input_female">女性<input id="input_female" type="radio" name="input_gender" value="2" checked></label>
      <label for="input_none">無回答<input id="input_none" type="radio" name="input_gender" value="3"></label>
    </div>
    <div>
      <label for="input_age">年齢：</label>
      <select id="input_age" name="input_age">
        <option value="1">〜19歳</option>
        <option value="2">20歳〜29歳</option>
        <option value="3" selected>30歳〜39歳</option>
        <option value="4">40歳〜49歳</option>
        <option value="5">50歳〜59歳</option>
        <option value="6">60歳〜</option>
      </select>
    </div>
    <div>
      <p>個人情報保護方針に同意いただける場合はチェックをつけてください。</p>
      <label for="input_agree"><input id="input_agree" type="checkbox" name="input_agree" value="1" checked>個人情報保護方針に同意する</label>
    </div>
    <input type="submit" id="btn_submit" name="btn_submit" value="送信">
  </form>
</article>

JavaScriptのコードは以下のようになります。
通常はページの「送信」ボタンが押されたときにデータを送信しますが、ここでは例としてページの読み込みが完了したタイミングでデータを送信します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const xhr = new XMLHttpRequest();
  const fd = new FormData();

  // (1) 送信先を指定
  xhr.open('post', './entry.php');

  // (2) フォームに入力されたデータを取得
  const input_name = document.querySelector('input[name=input_name]');
  const input_gender = document.querySelector('input[name=input_gender]:checked');
  const input_age = document.querySelector('select[name=input_age]');
  const input_agree = document.querySelector('input[name=input_agree]:checked');

  // (3) FormDataオブジェクトにデータをセット
  fd.append('name', input_name.value);
  fd.append('gender', input_gender.value);
  fd.append('age', input_age.value);
  fd.append('agree', input_agree.value);

  // (4) FormDataオブジェクトと一緒にリクエスト（要求）を送信
  xhr.send(fd);

  // (5) 通信が完了したらレスポンスをコンソールに出力する
  xhr.addEventListener('readystatechange', () => {

    if( xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.response);
    }
  });
});

(1)では、送信するメソッドと送信先のURLを指定します。
フォームのデータを送信するときはPOSTメソッドを使って送信することが多いため、ここでもPOSTメソッドを使用して通信を行います。

(2)はフォームの入力項目であるinput要素とselect要素からvalueプロパティを参照して入力値を取得します。
ここで取得した値は(3)でFormDataオブジェクトにセットします。
データをセットするときに、第1パラメータにはデータのラベルを指定し、第2パラメータに値を指定します。
データのラベルはサーバー側で受け取ったデータを参照するときに使用します。

(4)では最初に指定したURLへフォームの入力値と一緒にリクエスト（要求）を送信します。
正常に通信が完了したら、(5)でレスポンスを受け取ってコンソールに出力します。

上記の例で通信先として指定した「entry.php」が以下のようなシンプルなコードだとすると、コンソールにはレスポンスとして受け取った「氏名」が出力されます。

PHP コード例

<?php

echo '氏名:'.$_POST['name']; // レスポンス「氏名:佐藤 花子」を送信
exit;

通信が正常に完了していると、コンソールには「氏名:佐藤 花子」と出力されます。
PHPではPOSTメソッドで受け取ったデータは$_POSTに配列形式で入ります。
そこへ、(3)のFormDataオブジェクトでデータをセットするときに指定したラベルを使ってデータを参照して、レスポンスデータを作成・送信しています。

フォームの「氏名」以外の入力値を参照するときも同じようにラベルを指定することで参照可能です。
例えば「性別」であればラベル「gender」で参照することができます。

PHP コード例

<?php

echo '性別:'.$_POST['gender']; // レスポンス「性別:2」を送信
exit;

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。