Как показать сообщение об успехе и ошибке во всплывающем окне без перезагрузки страницы в Laravel

Это мой 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, но я не знаю, как это сделать.

Любая помощь будет принята с благодарностью!

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
1 293
1

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

эй, мы можем поболтать

shahzad shah 04.10.2018 21:35

ты там, пожалуйста, свяжитесь с нами

shahzad shah 04.10.2018 22:35

Другие вопросы по теме