使用Pjax提交POST表单时出现422 Unprocessable Entity错误求助

首先，咱们一步步拆解你遇到的问题——422错误通常和后端验证失败有关，但结合Pjax的特性，还有几个前端和配置的坑需要排查：

1. 先修复前端代码的语法错误 #

我一眼看到你的Pjax提交代码里有个语法问题：function(event{ 这里少了闭合的括号，这会直接导致JS代码无法执行，表单要么走普通提交，要么根本没触发Pjax逻辑。修正后的代码应该是：

$(document).on('submit', 'form[data-pjax]', function(event) {
    $.pjax.submit(event, '#pjax-container');
});

另外，你的表单标签里action="{{route('getadduser')}}"后面多了个逗号，这会导致浏览器解析表单地址出错，改成：

<form class="p-x-xs" ui-jp="parsley" action="{{route('getadduser')}}" method="post" data-pjax>
    {{ csrf_field() }}
    <!-- 表单内容 -->
</form>

2. 确保CSRF Token正确传递 #

Laravel的CSRF验证是必填项，虽然你用了{{ csrf_field() }}生成了隐藏input，但Pjax提交时有时候需要额外的请求头辅助。建议在页面头部添加CSRF meta标签：

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

然后在Pjax的全局配置里加上请求头：

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

这样能避免因为CSRF验证失败导致的各类错误。

3. 处理后端验证失败的422响应 #

422错误是Laravel验证失败的标准响应，但默认的验证失败逻辑会返回重定向，这对Pjax不友好。你需要在后端的store方法里明确添加验证规则，并确保返回适合Pjax的响应：

use Illuminate\Support\Facades\Hash;

public function store(Request $request) {
    // 先执行表单验证，失败会自动抛出422响应
    $validated = $request->validate([
        'username' => 'required|string|max:255|unique:users', // 建议加唯一性验证
        'pwd' => 'required|string|min:6', // 根据需求设置密码规则
        // 其他字段的验证规则
    ]);

    // 验证通过后创建用户，记得加密密码！
    $user = new User;
    $user->username = $request->username;
    $user->pwd = Hash::make($request->pwd); // 不要明文存密码
    $user->save();

    // 返回要在Pjax容器中渲染的成功页面/内容
    return view('users.success'); // 替换成你的实际视图
}

然后在前端监听Pjax的错误事件，把422的错误信息展示出来：

$(document).on('pjax:error', function(event, xhr, textStatus, errorThrown) {
    if (xhr.status === 422) {
        // 解析Laravel返回的错误信息
        const errors = xhr.responseJSON.errors;
        let errorHtml = '<div class="alert alert-danger">';
        $.each(errors, (key, messages) => {
            errorHtml += `<p>${messages[0]}</p>`;
        });
        errorHtml += '</div>';
        // 把错误内容插入到Pjax容器中
        $('#pjax-container').html(errorHtml);
    }
});

4. 确认Pjax容器存在 #

最后要确保页面里确实存在#pjax-container这个元素，Pjax需要把后端返回的内容替换到这个容器里，如果容器不存在，就会出现无响应的情况。

按照上面的步骤逐一排查，应该能解决你遇到的422错误和无响应问题。

内容的提问来源于stack exchange，提问作者fatemeh-habibi