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で自動対応可能）

まとめ

まとめ

Laravelで非同期フォーム送信を実装する方法として、Axiosを利用したAjax通信の基本を理解することは、現代のWeb開発ではとても重要です。従来のフォーム送信では、ボタンを押すとページ全体が再読み込みされ、処理が終わるまで画面が切り替わるため、ユーザー体験が少し遅く感じられることがあります。しかしAxiosを使った非同期通信を活用すると、ページを再読み込みせずにデータをサーバーへ送信し、その結果だけを画面の一部に表示できます。この仕組みによって、スムーズで快適なユーザー操作を実現できるようになります。

LaravelのAjax通信では、まずBladeテンプレートでフォームを作成し、JavaScriptでフォーム送信イベントを取得します。そして通常のフォーム送信を止めるためにpreventDefaultを使用し、AxiosのpostメソッドでLaravelのルートへデータを送信します。送信されたデータはLaravelのコントローラで受け取り、必要な処理を行ったあとJSON形式でレスポンスを返します。このJSONデータをJavaScript側で受け取り、画面の指定した要素に表示することで、ページ遷移のない動的な処理が実現できます。

LaravelとAxiosを組み合わせると、問い合わせフォーム、コメント投稿、検索フォーム、いいね機能、通知表示など、多くのWeb機能を非同期で実装できるようになります。特にユーザーが何度も操作する部分では、ページの再読み込みが無いだけで操作感が大きく向上します。そのため実務のLaravel開発でもAjaxとAxiosの知識はよく利用されます。

非同期フォーム送信の流れを整理しよう

LaravelでAjaxフォーム送信を実装する基本の流れは次のようになります。

• BladeテンプレートでHTMLフォームを作成する
• フォームに識別用のidを設定する
• JavaScriptでsubmitイベントを取得する
• preventDefaultで通常のフォーム送信を停止する
• FormDataで入力内容を取得する
• AxiosのpostメソッドでLaravelへ送信する
• Laravelコントローラでデータ処理を行う
• JSONレスポンスを返す
• JavaScriptでレスポンスを画面に表示する

この流れを理解しておけば、Laravelで非同期通信を使った多くの機能を実装できるようになります。最初は少し難しく感じるかもしれませんが、一度流れを覚えてしまえば、さまざまなフォーム処理に応用できます。

LaravelでAjaxフォーム送信を行うサンプルコード

ここで改めてLaravelとAxiosを利用した非同期フォーム送信の基本サンプルを確認してみましょう。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>

次にJavaScriptでフォーム送信イベントを監視し、Axiosを使ってLaravelへデータを送信します。送信が成功した場合と失敗した場合で表示メッセージを分けることで、ユーザーに分かりやすく結果を伝えることができます。

<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>

Laravel側ではルートとコントローラを設定し、送信されたデータを処理してJSONレスポンスを返します。JSONレスポンスはJavaScriptから扱いやすく、Ajax通信ではよく利用される形式です。

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

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

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

このようにLaravelとAxiosを組み合わせることで、フォーム送信をより柔軟に制御できるようになります。ページをリロードせずに処理を行えるため、ユーザーにとって快適でストレスの少ないWebアプリケーションを作ることができます。

Laravel非同期通信を学ぶメリット

LaravelでAjax通信やAxiosを理解しておくと、次のような場面で非常に役立ちます。

• お問い合わせフォームの送信処理
• コメント投稿やチャット機能
• 検索フォームのリアルタイム更新
• いいねボタンなどの即時更新処理
• 管理画面のデータ更新処理

これらの機能は現代のWebサービスでは当たり前のように使われています。Laravelで非同期フォーム送信の基本をしっかり理解しておくことで、実務レベルのWebアプリケーション開発にも対応できるようになります。