Fetch APIを使用してAjaxを実装する

2024-01-02

いままでjQueryの$.ajax({})を使用して実装していたフォーム（フォーム自体はPHPで処理）の処理をFetch APIに置き換えたので、そのコード。

フォーム部分html

<div class="form_area">
  <form id="form">
    <p><textarea name="message"></textarea></p>
    <p><button type="submit" class="button">送信</button></p>
  </form>
  <div id="error"></div>
  <div id="result"></div>
</div>

<div id="error"></div>には処理失敗時エラーメッセージ、<div id="result"></div>には処理成功時送信完了メッセージを表示させる。

Javascript

window.addEventListener('DOMContentLoaded', function() {
  const formData = document.getElementById('form');
  const formResult = document.getElementById('result');
  const formError = document.getElementById('error');
  const btn = document.querySelector('.button');
  const fd = new FormData();

  btn.addEventListener('click', (e)=> {
    e.preventDefault(); //submit処理をキャンセル

    const input_message = document.querySelector('textarea[name="message"]');
    fd.append('message', input_message.value);

    fetch( 'url', {
      method: 'POST',
      body: fd
    })
    .then(response => {
      if(!response.ok) {
        console.error('サーバーエラー');
        formError.innerHTML = '<p style="color: #f00;">エラーで送信できませんでした</p>';
      }
      response => response.json()
      formData.reset(); //送信したらtextareaの中身をリセットする
      formResult.innerHTML = '<p>送信ありがとうございます！</p>';
    })
    .catch((error) => {
      console.error(error);
      formError.innerHTML = '<p style="color: #f00;">エラーで送信できませんでした</p>';
    });
  });
});

fetch( 'url', {})のurlは実際にフォームを処理するプログラム（今回はPHP）のファイルパスを記述する。

（おまけ）jQueryの場合

  $('#form').submit(function(e) {
    e.preventDefault(); //submit処理をキャンセル

    $('#error').empty();
    const form_data = $('form').serialize(); //入力値を変数に格納

    //send to Ajax
    $.ajax({
      url: 'url',
      type: 'POST',
      data: form_data
    }).done(function(data, textStatus, jqXHR) {
        $('form')[0].reset();
        $('#result').html('<p>送信ありがとうございます！</p>');
    }).fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').html('<p>送信されませんでした…</p>');
    });
  });