Laravel Ajax 验证工作 [422 状态]，但如果验证成功并且数据已插入数据库，则页面未重定向

Posted 2023-03-15

【中文标题】Laravel Ajax 验证工作 [422 状态]，但如果验证成功并且数据已插入数据库，则页面未重定向

【英文标题】：Laravel Ajax validation worked [422 Status], but the page did not redirected if validation success and the data already inserted to DB

【发布时间】：2020-01-04 00:31:54

【问题描述】：

Laravel Ajax 验证有效 [422 状态]，但如果验证成功且数据已插入 DB，则页面未重定向

有一个错误 [422 Unprocessable Entity] 但我在代码中解决了如下。

我试图解决这个问题，它可以在不启用 ajax 验证的情况下成功重定向。

    // Routes

        Route::name('authorCreatePost')->get('post/create', 'AuthorController@createPost');
        Route::name('_authorCreatePost')->post('post/create', 'AuthorController@_createPost');

    // Controller

        public function _createPost(Request $request)
        
            $validator = $request->validate([
                'title' => 'required|string|max:255',
                'content' => 'required|min:20',
            ]);
            if (!$validator)
            
                return response()->json(['errors'=>$validator->errors()->all()]);
             else 
                $post = new Post();
                $post->title = $request['title'];
                $post->content = $request['content'];
                $post->user_id = Auth::id();
                if ($post->save()) 
                    return redirect(route('authorCreatePost'))->with('success', 'Post Created Successfully');
                
            

        

     // View

         <form action=" route('_authorCreatePost') " method="POST" id="create-post-form">
            @csrf
            <div class="card">
                <div class="card-header text-center text-uppercase h4 font-weight-normal bg-light">
                     __('Create Post') 
                </div>

                @if(Session::has('success'))
                    <div class="alert alert-success"> Session::get('success') </div>
                @endif

                <div class="alert alert-danger" style="display:none"></div>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li> $error </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="card-body">
                    <div class="row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="title" class="require"> __('Title') </label>
                                <input id="title" name="title" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="content" class="require"> __('Content') </label>
                                <textarea id="content" name="content" class="form-control" rows="6"></textarea>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="card-footer">
                    <button id="submit" type="submit" class="btn btn-success btn-block"> __('Create') </button>
                </div>

            </div>
        </form>

        <script type="text/javascript">

            $(document).ready(function()
                $('#create-post-form').submit(function(e)
                    validate_form(e);
                );
                function validate_form(e) 
                    e.preventDefault();
                    $.ajaxSetup(
                        headers: 
                            'X-CSRF-TOKEN': $("input[name='_token']").val(),
                        
                    );
                    $.ajax(
                        url: " route('_authorCreatePost') ",
                        method: 'post',
                        data: 
                            _token: $("input[name='_token']").val(),
                            title: $('#title').val(),
                            content: $('#content').val(),
                        ,
                        error: function(data)
                            if(data.status == 422) 
                                var errors = $.parseJSON(data.responseText).errors;
                                $('.alert-danger').empty();
                                $.each(errors, function(key, value)
                                    $('.alert-danger').show();
                                    $('.alert-danger').append('<p>'+value+'</p>');
                                );
                            
                        ,


                    );
                
            );
        </script>

[Validation works][1]
[Request and Response for 1][2]
[Here the data valid and inserted to DB][3]
[Request and Response for 3][4]


[1]: [https://i.stack.imgur.com/Shz0L.png][1]
[2]: [https://i.stack.imgur.com/FNbO7.png][1]
[3]: [https://i.stack.imgur.com/G6mSn.png][1]
[4]: [https://i.stack.imgur.com/QSr4s.png][1]

【问题讨论】：

在 ajax 请求中你不能重定向。你可以返回一个响应。

【参考方案1】：

你可以从你的控制器返回一个成功状态

response()->json(['success' => 'success'], 200);

然后在你的ajax调用中重定向成功函数

$.ajax(
    url: " route('_authorCreatePost') ",
    method: 'post',
    data: 
        //..
    ,
    success: function(response)
        window.location.href = " route('authorCreatePost') ";
    ,
    error: function(data)
        //...
    ,
);

或者你可以从你的控制器返回路由来重定向

response()->json(['redirect' => route('authorCreatePost')], 200);

然后在ajax调用成功函数的response中重定向到路由

$.ajax(
    url: " route('_authorCreatePost') ",
    method: 'post',
    data: 
        //..
    ,
    success: function(response)
        window.location.href = response.redirect;
    ,
    error: function(data)
        //...
    ,
);

【讨论】：

我在成功之前尝试过：function(response) window.location.href = " route('authorCreatePost') "; ，但很抱歉我错过了“window.location.href”中的“window”。谢谢它现在可以工作了