laravel如何处理AJAX请求和响应_Laravel AJAX请求与响应处理教程-Laravel-PHP中文网

laravel如何处理AJAX请求和响应_Laravel AJAX请求与响应处理教程

穿越時空

发布： 2025-10-05 14:34:03

原创

629人浏览过

Laravel处理AJAX请求需定义路由、控制器返回JSON、前端发送请求并处理响应，注意CSRF保护与跨域配置。

laravel如何处理ajax请求和响应_laravel ajax请求与响应处理教程

Laravel 处理 AJAX 请求和响应非常方便，结合其强大的路由、控制器和响应机制，可以快速构建前后端分离或局部刷新的动态功能。下面详细介绍如何在 Laravel 中处理 AJAX 请求与返回 JSON 响应。

定义 AJAX 路由

Laravel 中可以通过 routes/web.php 定义处理 AJAX 请求的路由。建议将 AJAX 相关路由分组或加上前缀如 api 或使用独立文件 routes/api.php。

示例：

// routes/web.php
Route::post('/submit-form', [FormController::class, 'handleAjax'])->name('ajax.submit');

登录后复制

如果你希望自动返回 JSON 并省略 session 验证，推荐使用 api.php 路由文件，所有路由默认无状态并以 /api 开头。

控制器中处理请求并返回 JSON

在控制器方法中，接收 AJAX 发送的数据，并使用 response()->json() 返回结构化数据。

示例控制器代码：

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function handleAjax(Request $request)
    {
        // 验证数据
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email',
        ]);

        // 模拟处理逻辑（如保存数据库）
        // User::create($validated);

        return response()->json([
            'success' => true,
            'message' => '数据提交成功！',
            'data' => $validated
        ]);
    }
}

登录后复制

如果发生错误，也可以返回错误信息：

return response()->json([
    'success' => false,
    'message' => '验证失败',
    'errors' => $validator->errors()
], 422);

登录后复制

前端发送 AJAX 请求（使用 jQuery 示例）

前端可通过 jQuery 的 $.ajax() 方法发送请求。确保设置 Content-Type 为 application/json，并正确传递 CSRF Token（如果是 web 路由）。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

HTML 表单示例：

<form id="ajaxForm">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <button type="submit">提交</button>
</form>

<div id="result"></div>

登录后复制

JavaScript 代码：

$('#ajaxForm').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: '/submit-form',
        method: 'POST',
        data: {
            name: $('input[name="name"]').val(),
            email: $('input[name="email"]').val(),
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#result').html('<span style="color:green;">' + response.message + '</span>');
        },
        error: function(xhr) {
            let errors = xhr.responseJSON.errors;
            let msg = '';
            $.each(errors, function(key, value) {
                msg += value[0] + '<br>';
            });
            $('#result').html('<span style="color:red;">' + msg + '</span>');
        }
    });
});

登录后复制