如何在不重新加载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。

execution: e1s1
lt: LT-834935-bEjV0TiHLqi0T6kQddxklS7GoKgOhO

控制器

...
<!-- 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>

这是您可以执行的示例代码。 这里要注意的事情。

1. 这使用public function changepassword(Request $request) { if($validator->fails()) { return response()->json([ 'success' => false, 'message' => $errors ], 422); } else { return response()->json([ 'message' => 'Success' ], 200); } } 库。如果您还没有包含，请将其包含在内。
2. 在控制器中，确保始终返回jquery。永远不要重定向。
3. 因为这个问题是关于询问response()的，所以有几种解决方法
4. 由于这是示例代码，因此可能会有很多错误。因此，请勿复制和粘贴代码。尝试了解这里发生的情况，并编写与您的项目匹配的代码。