Как отобразить сообщение об успехе и ошибке во всплывающем окне без перезагрузки страницы в 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. , так как это пример кода, может быть много ошибок.так что не копируйте и не вставляйте код.постарайтесь понять, что здесь происходит, и напишите код, соответствующий вашему проекту.