Laravel AJAX实现CRUD遇POST方法不支持及422错误求助

问题背景 #

作为Laravel新手，在实现AJAX版CRUD时，数据展示正常，但添加数据时遇到两个连续错误：

1. 首次报错："该路由不支持POST方法，支持的方法为GET、HEAD"
2. 修复函数调用问题后，出现**422 (Unprocessable Content)**错误
   最终通过替换控制器的请求类解决了问题，以下是问题分析和解决过程。

错误1：路由不支持POST方法 #

问题原因 #

点击添加按钮时，未正确触发addProject()函数，导致请求方式不符合路由定义（路由为POST，但实际发起了GET请求）。

解决方式 #

确保按钮点击事件正确绑定并调用AJAX提交函数：

$('#save').click(function(){
    addProject();
});

错误2：422 Unprocessable Content #

问题原因 #

ProjectStoreRequest表单验证未通过，且AJAX请求未处理验证错误反馈，直接返回422状态码。常见诱因包括：

• 前端提交字段不符合验证规则（如必填项为空）
• 验证请求类的规则与前端字段不匹配

临时解决方式 #

将控制器store方法的参数从ProjectStoreRequest替换为基础Request类，绕过验证：

use Illuminate\Http\Request;

public function store(Request $request)
{
    $deadline = Carbon::parse($request->deadline)->format('Y-m-d');
    $project = [
        'title' => $request->title,
        'description'=>$request->description,
        'deadline' => $deadline,
        'status' => $request->status,
        'client_id' => $request->client_id,
    ];
    $data = Project::create($project);
    return [
        'status'=>'ok',
        'success'=>!!$data,
        'message'=>$data ? 'Record created succesfully!' : 'Record created failed!'
    ];
}

规范解决方案（推荐保留验证） #

如果要保留表单验证逻辑，需完成以下两步：

1. 确保ProjectStoreRequest的验证规则与前端字段匹配：

// app/Http/Requests/ProjectStoreRequest.php
namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ProjectStoreRequest extends FormRequest
{
    public function authorize()
    {
        return true; // 根据权限需求调整
    }

    public function rules()
    {
        return [
            'title' => 'required|string|max:255',
            'description' => 'required|string',
            'deadline' => 'required|date',
            'status' => 'required|in:Proposal,In Progress,Completed',
            'client_id' => 'required|exists:users,id', // 替换为实际client表名
        ];
    }
}

2. 在AJAX请求中添加错误处理，展示验证信息：

function addProject(){
    var title = $('#title').val();
    var description = $('#description').val();
    var deadline = $('#deadline').val();
    var status = $('#status').val();
    var client = $('#clients_list').val();
    var token = $('#csrf').val();

    // 先清除之前的错误提示
    $('.text-danger').remove();

    $.ajax({
        type: 'post',
        data: {
            title: title,
            description: description,
            deadline: deadline,
            status: status,
            client_id: client,
            _token: token
        },
        url: "{{ url('project-add') }}",
        success: function(response) {
            $('#exampleModal').modal('hide');
            // 清空表单
            $('#title').val('');
            $('#description').val('');
            $('#deadline').val('');
            projects();
            alert(response.message);
        },
        error: function(xhr) {
            if(xhr.status === 422){
                let errors = xhr.responseJSON.errors;
                // 遍历错误并显示到对应字段下方
                $.each(errors, function(key, value){
                    $('#' + key).after('<div class="text-danger">' + value[0] + '</div>');
                });
            }
        }
    });
}

完整相关代码 #

web.php #

Route::get('projects',[ProjectController::class, 'index']) -> name('projects.index');
Route::get('project-list', [projectController::class, 'list']);
Route::post('project-add', [projectController::class, 'store']);
Route::get('project-view', [projectController::class, 'show']);
Route::get('project-delete', [projectController::class, 'destroy']);
Route::post('project-edit', [projectController::class, 'update']);

Blade视图核心JS部分 #

$(document).ready(function() {
    projects();
});

function projects(){
    $.ajax({
        type : 'get',
        url : "{{url('project-list')}}",
        success : function(response) {
            var tr = '';
            for(var i = 0;i<response.length;i++){
                var title = response[i].title;
                var description = response[i].description;
                var clientname = response[i].client.name;
                var deadline = response[i].deadline;
                var status = response[i].status;
                tr += '<tr>';
                tr += '<td>' + (i+1) + '</td>';
                tr += '<td>' +title + '</td>';
                tr += '<td>' + description + '</td>';
                tr += '<td>' + clientname + '</td>';
                tr += '<td>' + deadline + '</td>';
                tr += '<td>' + status + '</td>';
                tr += '<td><div class="justify-content-around">'
                tr += '<a href="javascript:void(0)" class="btn btn-primary">Show</a>'
                tr += '<a href="javascript:void(0)" class="btn btn-primary">Edit</a>'
                tr += '<a href="javascript:void(0)" class="btn btn-danger">Delete</a>'
                tr += '</div></td>'
            }
            $('.projectdata').html(tr);
        }
    });
}

$('#save').click(function(){
    addProject();
});

function addProject(){
    var title = $('#title').val();
    var description = $('#description').val();
    var deadline = $('#deadline').val();
    var status = $('#status').val();
    var client = $('#clients_list').val();
    var token = $('#csrf').val();

    $('.text-danger').remove();

    $.ajax({
        type: 'post',
        data: {
            title: title,
            description: description,
            deadline: deadline,
            status: status,
            client_id: client,
            _token: token
        },
        url: "{{ url('project-add') }}",
        success: function(response) {
            $('#exampleModal').modal('hide');
            $('#title').val('');
            $('#description').val('');
            $('#deadline').val('');
            projects();
            alert(response.message);
        },
        error: function(xhr) {
            if(xhr.status === 422){
                let errors = xhr.responseJSON.errors;
                $.each(errors, function(key, value){
                    $('#' + key).after('<div class="text-danger">' + value[0] + '</div>');
                });
            }
        }
    });
}

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