Laravelで非同期フォーム送信（AJAX + Axios）の基本

1. Axiosの準備とHTMLフォーム

1. Axiosの準備とHTMLフォーム

まずはHTMLフォームを作ります。Bladeテンプレートで書く場合は以下のようにします。

<form id="ajaxForm">
    @csrf
    <input type="text" name="name" class="form-control mb-2" placeholder="名前を入力">
    <button type="submit" class="btn btn-primary">送信</button>
</form>

<div id="message" class="mt-2"></div>

ここではid="ajaxForm"でフォームを特定し、id="message"で送信結果を表示します。

2. JavaScriptでAxiosを使った非同期送信

2. JavaScriptでAxiosを使った非同期送信

次にBlade内でAxiosを使ってフォーム送信を非同期化します。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('ajaxForm').addEventListener('submit', function(e){
    e.preventDefault(); // ページリロードを防ぐ

    let formData = new FormData(this);

    axios.post("{{ route('ajax.submit') }}", formData)
        .then(function(response){
            document.getElementById('message').innerHTML = '<div class="alert alert-success">' + response.data.message + '</div>';
        })
        .catch(function(error){
            document.getElementById('message').innerHTML = '<div class="alert alert-danger">送信に失敗しました</div>';
        });
});
</script>

ポイントはe.preventDefault()で通常の送信を止め、axios.postでデータを送るところです。送信成功時と失敗時に

3. Laravelルートとコントローラ

3. Laravelルートとコントローラ

次にルートとコントローラを設定します。

Route::post('/ajax-submit', [FormController::class, 'ajaxSubmit'])->name('ajax.submit');

public function ajaxSubmit(Request $request)
{
    $name = $request->input('name');

    // 保存処理やバリデーションも可能
    // 例: User::create(['name' => $name]);

    return response()->json([
        'message' => $name . 'さんの送信が完了しました！'
    ]);
}

response()->json()でJSON形式のレスポンスを返すことで、Axiosで簡単に扱えます。

4. 非同期送信のメリットと注意点

4. 非同期送信のメリットと注意点

• ページ全体をリロードせずにデータを送信できるため、ユーザー体験が向上する
• 複数のフォームや部分更新にも対応しやすい
• バリデーションやエラーハンドリングをJSONで返すことで柔軟に表示できる
• Axiosを使うとコードがシンプルで理解しやすい
• CSRFトークンを忘れずに送信することが重要（@csrfで自動対応可能）