Laravel中如何实现表单提交时不刷新页面？

当然有，Laravel生态里有多种成熟方案实现表单无刷新提交，以下是几种常用的实践方式：

1. 原生AJAX/jQuery AJAX #

这是最通用的基础方案，无需额外依赖，通过前端拦截表单默认提交行为，异步发送请求到后端接口。

前端代码（jQuery示例） #

<form id="ajax-form" method="POST" action="{{ route('form.submit') }}">
    @csrf
    <input type="text" name="name" placeholder="输入名称">
    <button type="submit">提交</button>
</form>
<div id="response-box"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $('#ajax-form').on('submit', function(e) {
        e.preventDefault(); // 阻止页面刷新跳转
        
        $.ajax({
            url: $(this).attr('action'),
            method: $(this).attr('method'),
            data: $(this).serialize(),
            success: function(res) {
                $('#response-box').html('<p class="text-green-600">提交成功：' + res.msg + '</p>');
                $('#ajax-form')[0].reset(); // 重置表单
            },
            error: function(xhr) {
                $('#response-box').html('<p class="text-red-600">提交失败：' + xhr.responseJSON.msg + '</p>');
            }
        });
    });
</script>

后端控制器代码 #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function submit(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
        ]);
        
        // 这里写表单逻辑，比如存入数据库
        
        return response()->json([
            'msg' => '表单处理完成',
            'data' => $validated['name']
        ]);
    }
}

路由定义 #

use App\Http\Controllers\FormController;

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

2. Laravel Livewire #

Laravel官方推出的全栈组件库，无需编写大量JS，通过组件化方式实现无刷新交互，适合快速开发。

1. 生成Livewire组件 #

运行Artisan命令：

php artisan make:livewire FormSubmit

2. 组件类代码（app/Http/Livewire/FormSubmit.php） #

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class FormSubmit extends Component
{
    public $name = '';

    protected $rules = [
        'name' => 'required|string|max:255',
    ];

    public function submit()
    {
        $this->validate();
        
        // 处理表单逻辑
        
        $this->name = ''; // 清空输入框
        session()->flash('success', '提交成功！');
    }

    public function render()
    {
        return view('livewire.form-submit');
    }
}

3. 组件视图代码（resources/views/livewire/form-submit.blade.php） #

<form wire:submit.prevent="submit">
    <input type="text" wire:model="name" placeholder="输入名称">
    @error('name') <span class="text-red-500">{{ $message }}</span> @enderror
    
    <button type="submit">提交</button>
</form>

@if(session('success'))
    <div class="text-green-500 mt-2">{{ session('success') }}</div>
@endif

4. 在父视图中引用组件 #

<livewire:form-submit />

3. Inertia.js #

Inertia.js可以在Laravel中构建单页应用风格的无刷新界面，支持Vue、React、Svelte等前端框架。

前端Vue组件示例 #

<template>
  <div class="form-container">
    <form @submit.prevent="handleSubmit">
      <input v-model="form.name" type="text" placeholder="输入名称">
      <span v-if="form.errors.name" class="text-red-500">{{ form.errors.name }}</span>
      
      <button type="submit">提交</button>
    </form>
    
    <div v-if="successMsg" class="text-green-500 mt-2">{{ successMsg }}</div>
  </div>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3';

const form = useForm({
  name: '',
});

let successMsg = '';

const handleSubmit = async () => {
  const response = await form.post(route('form.submit'));
  
  if (response.ok) {
    successMsg = '表单提交成功';
    form.reset();
  }
};
</script>

后端控制器代码 #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class FormController extends Controller
{
    public function submit(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
        ]);
        
        // 处理表单逻辑
        
        return back()->with('success', '提交完成');
    }
}

内容的提问来源于stack exchange，提问作者Nick Wolfgang