入力、設定フォームを非同期でsubmitする（Laravel, jQery, Ajax）

始めに

設定フォームを非同期でsubmitする（Ajax付）実装を行ったのでメモとして残します。

開発環境

開発環境	バージョン
Laravel	8.83.19
PHP	7.3.10
jQuery	1.11.0

実装内容いってみよう

レイアウト、装飾関連はご自分で設定ください。

form.blade.php

<form id="setting_form" class="form-group form-float" role="form" method="post" name="setting_form">
                                            // fileを送信する際は→必要（enctype="multipart/form-data"）
@csrf
    <ul class="ul-set">
        <li class="form_1">
            <label>登録欄１：</label>
            <input id="input_form_1" name="input_form_1" @isset($regist_1) value="{{ $regist_1 }}" @endisset>
        </li>
        <li class="form_2">
            <label>登録欄２：</label>
            <input id="input_form_2" name="input_form_2" @isset($regist_2) value="{{ $regist_2 }}" @endisset>
        </li>
        <li class="form_3">
            <label>登録欄３：</label>
            <input id="input_form_3" name="input_form_2" @isset($regist_3) value="{{ $regist_3 }}" @endisset>
        </li>
    </ul>
    <p><input type="submit" id="regist-btn" value="設定保存"></p>
</form>

form.js

// 「 設定保存 」ボタン押下時
$('#setting_form').on('submit', function(e) {

  // 初期設定
  var arrayFormInfo = [];

  // 設定欄に入力された情報を取得する
  const formInfo = $('form');
  const fd = new FormData(formInfo.get(0));

  // フォームデータを配列に格納
  for(value of fd.entries()){
    console.log(value);
    arrayFormInfo.unshift(value);
  }

  $.ajax({
    url  : '飛ばし先のURL',
    type : "POST",
    data : fd,
    cache       : false,
    contentType : false,
    processData : false,
    dataType    : "json"
  })
  // 成功した時
  .done(function(json){
    var errorMessage = json.errorMessage;
    // エラーがある時
    if(errorMessage.length) {
      alert('登録に失敗しました。');
      or
      var errorMessage = errorMessage.join('\n');
      alert(errorMessage);
    // エラーがない時
    } else {
      alert('登録が完了しました。');
      location.reload();
    }
  })
  // 失敗した時
  .fail(function(jqXHR, textStatus, errorThrown){
    alert('登録に失敗しました。：' + textStatus + ':\n' + errorThrown);
    location.reload();
  });
  return false;
});

終わりに

閲覧ありがとうございました。
メモ程度なので、ご了承ください。
ご指摘、ご意見ありましたら、コメントよろしくお願いします。