我使用ajax的表单返回完整的json响应数据，而不是发送我的toastr警报

Question

我有一个工作正常的引导模式，它显示表单，但问题是当我提交表单而不是显示错误或成功消息时，它会带来整个 json 响应并删除页面内容的其余部分。

控制器类：

public function store(Request $request)
    {
        $rules = array(
            'first_name' => 'required',
            'last_name' => 'required',
            'email' => 'required|email|unique:admins',
            'username' => 'required|unique:admins',
            'password' => 'required|confirmed|min:6',
        );
        $error = Validator::make($request->all(), $rules);
        if($error->fails()) {
            return response()->json([
                'error'  => $error->errors()->all()
            ]);
        }
        Admin::create([
           'first_name' => $request->first_name,
           'last_name' => $request->last_name,
           'email' => $request->email,
           'username' => $request->username,
           'password' => Hash::make($request->password),
        ]);
        return response()->json('success');
    }

这是ajax代码：

<script>
        $("#login").on('submit', function(e) {
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: '{{ route("admin.accounts.index") }}',
                method: "POST",
                data: $(this).serialize(),
                dataType: 'json',
                beforeSend:function() {
                    $("#icon").addClass("fas fa-spinner fa-spin");
                    $("#submit").addClass("disabled");
                },
                success:function (data) {
                    console.log(data);
                    if($.isEmptyObject(data.error)) {
                        window.location.replace('/admin/accounts');
                    } else {
                        $("#icon").removeClass("fas fa-spinner fa-spin");
                        $("#submit").removeClass("disabled");
                        $.each(data.error, function(index, value) {
                            console.log(value);
                            toastr.error(value);
                        });
                    }
                }
            })
        });
    </script>

这是我的模式：

 <!-- Modal -->
    <div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Create New Administrator</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" id="create">
                        @csrf
                        <div class="form-group">
                            <label for="first_name">First Name</label>
                            <input type="text" id="first_name" name="first_name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="last_name">Last Name</label>
                            <input type="text" id="last_name" name="last_name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" id="username" name="username" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" id="password" name="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="password_confirmation">Password Confirmation</label>
                            <input type="password" id="password_confirmation" name="password_confirmation" class="form-control">
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="submit" type="submit" class="btn btn-primary">Create Admin <span id="icon" class=""></span></button></form>
                </div>
            </div>
        </div>
    </div>

我不知道为什么它会以 json 数据的形式返回错误结果并显示它，而不是像我的其他成功表单那样使用 ajax 进行重定向，或者在出现错误时显示 toastr 错误。

我尝试从按钮中删除 type="submit" 。但在那之后我迷失了。 ajax 新手。

Answer 1

我没有使用正确的

我估计昨天看了6个小时，但没有注意到。