如何将AJAX与Laravel 5.5、Mailtrap.io结合实现无刷新提交联系表单

别担心！既然你已经搭好了能正常运行的联系表单、写了AJAX提交逻辑和ContactController，那搞定无刷新提交其实就是把这几部分的交互逻辑理顺就行，我来给你拆解关键步骤：

Laravel默认开启CSRF保护，AJAX请求必须携带令牌才不会被拒绝，这里有两种常用方式：

方式一：直接在AJAX数据里携带令牌 #

先确保你的表单里有Laravel生成的CSRF字段（用@csrf Blade指令即可自动生成），然后在AJAX请求中把令牌值传进去：

$('#contact-form').submit(function(e) {
    e.preventDefault(); // 必须阻止表单默认提交行为，避免页面刷新

    $.ajax({
        url: '{{ route("contact.submit") }}', // 用路由名称更可靠
        method: 'POST',
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            message: $('#message').val(),
            _token: $('input[name="_token"]').val() // 取出CSRF令牌
        },
        success: function(response) {
            // 提交成功后的处理：提示用户+重置表单
            alert('消息发送成功！');
            $('#contact-form')[0].reset();
        },
        error: function(xhr) {
            // 处理验证失败或服务器错误
            let errorMsg = '';
            if (xhr.responseJSON?.errors) {
                $.each(xhr.responseJSON.errors, function(key, value) {
                    errorMsg += value + '\n';
                });
            } else {
                errorMsg = '提交失败，请稍后重试';
            }
            alert(errorMsg);
        }
    });
});

方式二：全局配置AJAX请求头（更优雅） #

在页面头部添加CSRF meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在JS里全局设置AJAX请求头，这样所有AJAX请求都会自动带上令牌：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

之后AJAX的data里就不用单独传_token了。

因为是AJAX请求，控制器不能返回视图或重定向，要返回JSON格式的响应，适配前端的回调逻辑：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;

class ContactController extends Controller
{
    public function submit(Request $request)
    {
        // 验证表单数据（规则根据你的需求调整）
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email',
            'message' => 'required|string|min:10'
        ]);

        // 发送邮件（你已经配置好Mailtrap，这部分逻辑不用改）
        Mail::send('emails.contact', $validated, function($message) use ($request) {
            $message->from($request->email, $request->name);
            $message->to('your-admin-email@example.com')->subject('新的联系消息');
        });

        // 返回成功的JSON响应
        return response()->json(['success' => '消息已成功发送至Mailtrap！'], 200);
    }
}

如果验证失败，Laravel会自动返回422状态码的JSON错误信息，正好能被AJAX的error回调捕获。

确保你的POST路由指向控制器的submit方法：

// routes/web.php
Route::post('/contact', 'ContactController@submit')->name('contact.submit');

如果遇到问题，先看浏览器控制台的报错：

• 419状态码：CSRF令牌未正确携带，检查令牌配置
• 422状态码：表单验证失败，看响应里的错误信息
• 500状态码：服务器内部错误，可以在控制器里加日志排查：

\Log::info('联系表单提交数据', $validated);

然后查看storage/logs/laravel.log里的记录，确认邮件发送逻辑是否正常。

另外，Mailtrap的配置你之前已经验证过能正常发送，所以AJAX提交后邮件依然会出现在Mailtrap的收件箱里，不用额外调整Mailtrap的设置。

内容的提问来源于stack exchange，提问作者Jafar Salami