如何在弹出窗口中显示成功和错误消息而不在 Laravel 中重新加载页面

Question

这是我的 HTML 文件：

            <div class="modal-body">
                <form role="form" id="passwordchangeform" class="common_form_style popup_form" method="POST" novalidate action="{{ url('/changepassword') }}">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="password" style="width:100%">Původní heslo </label>
                                <input id="password" type="password" class="form-control" name="password">
                                <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                            </div>
                            <div class="form-group">
                                <label for="new_password" style="width:100%">NovÄ› heslo</label>
                                <input id="new_password" type="password" class="form-control" name="new_password">
                                <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                <span class="help-block" style="color:#737373;font-size:14px;float:right;margin-right: 30px;font-weight: 100 !important;">MinimálnÄ› 8 znaků, jedno velké a malé písmeno a Äíslo</span>
                            </div>
                            <div class="form-group">
                                <label for="heslo znovu">Potvrzení heslo</label>
                                <input id="password_confirmation" type="password" class="form-control" name="password_confirmation">
                                <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                            </div>

                            <div class="submit-btn text-center">
                                <button type="submit" class="btn btn-default chci" style="background:#e94549;">Uložit</button>
                            </div>
                            <div style="margin-top:10px;" id="success-messages"></div>
                        </div>
                        <div class="col-md-12 pull-right"></div>
                    </div>
                </form>
            </div>

这是我的控制器：

public function changepassword(Request $request){
    $user = Auth::guard()->user();
    $request_data = $request->All();
    $validator = $this->admin_credential_rules($request_data);
    if($validator->fails()) {
        $errors = $validator->errors();
        $errors = json_decode($errors);

        return response()->json([
            'success' => false,
            'message' => $errors
        ], 422);
    } else {
        $current_password = $user->password;
        if(md5($request_data['password']) == $current_password) {
            $user_id = $user->id;
            $obj_user = User::find($user_id);
            $obj_user->password = md5($request_data['new_password']);;
            $obj_user->save();

            return \Illuminate\Support\Facades\Redirect::to('mujucet')
                ->with("modal_message_success", "Password has been changed successfully");
        } else {
            return \Illuminate\Support\Facades\Redirect::to('mujucet')
                ->with("modal_message_danger", "wong old password");           
        }
    }
}

我有一个更改密码的表格。我可以更改密码，但它会重新加载页面。不知何故，我想在不重新加载页面的情况下在弹出窗口中显示这些错误和成功消息。这可以通过 AJAX 实现，但我不知道该怎么做。

任何帮助将不胜感激！

Answer 1

如果您不想重新加载页面，您肯定需要使用 AJAX。

...
<!-- other code goes here. -->
<!-- note that type of the button has changed. and onclick event has assigned. -->

        <div class="submit-btn text-center">
            <button type="button" class="btn btn-default chci"
                style="background:#e94549;" onclick="submitForm()">
                Uložit
            </button>
        </div>
        <div style="margin-top:10px;" id="success-messages"></div>
        </div>
        <div class="col-md-12 pull-right"></div>
        </div>
    </form>
</div>

 <!-- Alert Dialog -->
 <!-- this alert is used to show succes or error -->
    <div class="modal fade" id="alert_modal" style="margin-top: 150px;">
        <div class="modal-body">

            <h3>Alert</h3>

            <h5 id="alert_message"></h5>

            <div class="row-fluid">
                <div class="span12">
                    <button type="button" class="btn btn-danger span2" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

<script>
    // this function calls when the submit button is pressed.
    function submitForm() {

        $.ajax({
            method: 'POST',
            url: '{{ url('/changepassword') }}',
            data: $('#passwordchangeform').serialize(),
            success: response => {

                // set message to the alert box.
                $('#alert_message').text(response.message);
                // show the aalert box.
                $('#alert_modal').modal();
            },
            error: response => {

                $('#alert_message').text(response.message);
                $('#alert_modal').modal();
            }
        });
    }
</script>

控制器

public function changepassword(Request $request)
{
    if($validator->fails()) {
        return response()->json([
            'success' => false,
            'message' => $errors
        ], 422);
    } else {
        return response()->json([
            'message' => 'Success'
        ], 200);
    }
}

这是您可以做什么的示例代码。 这里需要注意的事项。

1. 这使用jquery 库。如果您还没有包含它，请包含它。
2. 在控制器中，确保始终返回response()。从不重定向。
3. 因为这个问题是关于询问how to do this ?，所以有几种方法可以解决这个问题
4. 因为这是一个示例代码，所以可能会有很多错误。所以不要复制粘贴代码。尝试了解这里发生了什么并编写与您的项目相匹配的代码。