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>');
		});
	});