先生と生徒の会話形式で理解しよう

生徒

「Laravelでフォームを送信するときにページをリロードせずに処理したいんですが、できますか？」

先生

「はい、できます。JavaScriptのAxiosというライブラリを使うと、非同期でフォーム送信が可能です。ページを再読み込みせずにデータを送信して、結果だけ表示できます。」

生徒

「非同期って何ですか？難しそうです。」

先生

「非同期とは、順番を待たずに処理を行うことです。例えば、料理を作りながら洗濯もするイメージです。LaravelではAxiosで非同期にデータを送ることで、ユーザーの操作感をスムーズにできます。」

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を使った非同期送信

次に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ルートとコントローラ

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


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で簡単に扱えます。