如何通过 AJAX 实现表单提交而不跳转页面-php教程-PHP中文网

如何通过 AJAX 实现表单提交而不跳转页面

本文介绍如何使用 ajax 替代传统表单提交，实现在 laravel 中无刷新发送邮件并保留当前页面状态，避免重定向，同时确保 csrf 安全和数据完整性。

本文介绍如何使用 ajax 替代传统表单提交，实现在 laravel 中无刷新发送邮件并保留当前页面状态，避免重定向，同时确保 csrf 安全和数据完整性。

在 Laravel 应用中，表单默认通过 POST 提交并触发服务端重定向（如 redirect()->route(...)），这会导致页面跳转、用户体验中断。要实现“点击即发送、不跳转、有反馈”的效果，必须将同步提交改为异步 AJAX 请求，并妥善处理 CSRF 令牌、表单数据序列化及服务端响应。

✅ 正确实现步骤

1. 修改表单：移除 action 和 method 的依赖，添加唯一 ID 并禁用默认提交

⚠️ 注意：移除 action 和 method 属性，由 JS 控制提交逻辑；保留 @csrf 或 {{ csrf_field() }} 以供前端读取 token。

2. 使用原生 Fetch 或 jQuery 发送 AJAX 请求（推荐 Fetch，轻量且现代）

<script>
document.getElementById('contactForm').addEventListener('submit', async function (e) {
    e.preventDefault(); // 阻止默认跳转

    const formData = new FormData(this);
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    try {
        const response = await fetch("{{ route('contactanos.store') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json'
            },
            body: formData
        });

        const result = await response.json();

        if (response.ok) {
            alert('✅ Correo enviado exitosamente.');
            // 可选：清空表单或重置选择框
            this.reset();
        } else {
            throw new Error(result.message || 'Error al enviar el formulario');
        }
    } catch (error) {
        alert('❌ ' + error.message);
        console.error('AJAX submission failed:', error);
    }
});
</script>

? 小贴士：确保页面

jQuery金融借款单提交表单
jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

中已声明 CSRF meta 标签：
<meta name="csrf-token" content="{{ csrf_token() }}">

3. 更新控制器：返回 JSON 响应而非重定向

// App\Http\Controllers\CoordinacionesController.php
public function store(Request $request)
{
    // ✅ 验证必要字段（强烈建议添加）
    $validated = $request->validate([
        'emailperito' => 'required|email',
        'email' => 'required|email',
        'siniestro' => 'required|string',
        // 其他关键字段...
    ]);

    try {
        $correo = new ContactanosMailable($validated);
        Mail::to($validated['emailperito'])
            ->cc($validated['email'])
            ->send($correo);

        return response()->json([
            'success' => true,
            'message' => 'Correo enviado correctamente.'
        ], 200);

    } catch (\Exception $e) {
        \Log::error('Email sending failed: ' . $e->getMessage());
        return response()->json([
            'success' => false,
            'message' => 'No se pudo enviar el correo. Inténtelo nuevamente.'
        ], 500);
    }
}

? 安全提示：

永远验证输入：避免直接使用 $request->all()，防止 mass assignment 漏洞；

捕获邮件异常：Mail::send() 可能因 SMTP 配置失败而抛出异常，需 try/catch；

避免敏感信息泄露：JSON 响应中不要返回调试堆栈或数据库细节。

4. （可选）增强用户体验：添加加载状态与错误高亮

// 在 fetch 前添加 loading 效果
const submitBtn = e.target.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = 'Enviando...';

// fetch 后恢复按钮
submitBtn.disabled = false;
submitBtn.textContent = 'Enviar formulario';