本文介绍如何使用 ajax 替代传统表单提交，实现在 laravel 中无刷新发送邮件并保留当前页面状态，避免重定向，同时确保 csrf 安全和数据完整性。
本文介绍如何使用 ajax 替代传统表单提交，实现在 laravel 中无刷新发送邮件并保留当前页面状态，避免重定向，同时确保 csrf 安全和数据完整性。
在 Laravel 应用中，表单默认通过 POST 提交并触发服务端重定向（如 redirect()->route(...)），这会导致页面跳转、用户体验中断。要实现“点击即发送、不跳转、有反馈”的效果，必须将同步提交改为异步 AJAX 请求，并妥善处理 CSRF 令牌、表单数据序列化及服务端响应。
✅ 正确实现步骤
1. 修改表单：移除 action 和 method 的依赖，添加唯一 ID 并禁用默认提交
<form id="contactForm">
{{ csrf_field() }} <!-- 仍需保留用于 JS 获取 token -->
<!-- 其他字段保持不变（select、input 等） -->
<button type="submit" class="btn btn-primary float-right">Enviar formulario</button>
</form>⚠️ 注意：移除 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>? 小贴士：确保页面 <head> 中已声明 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';? 总结
- 表单无跳转的核心是 拦截 submit 事件 + AJAX 提交 + JSON 响应；
- CSRF 必须通过 X-CSRF-TOKEN 请求头传递（而非 _token 字段），更符合现代实践；
- 服务端应统一返回结构化 JSON，便于前端统一处理成功/失败；
- 始终兼顾验证、异常处理与用户反馈，才能构建健壮的无刷新交互流程。
通过以上改造，你的“Enviar formulario”按钮将静默完成邮件发送，页面停留原地，体验更接近桌面应用——这才是现代 Web 表单应有的交互范式。
