Как отправить всплывающую форму, используя ajax с обновлением страницы в laravel

Question

Я пытаюсь отправить всплывающую форму с помощью ajax без перезагрузки страницы, и мои сообщения об ошибках и ошибках должны отображаться в моей всплывающей форме:

Мой код Ajax:

                  $('#submit_form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/changepassword",
            data: $(this).serialize(),
            success: function(change_password) {
                alert(change_password);
            }
        });
    }),

МойКод контроллера:

                   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();

             $msg = "password has been changed";
            return response()->json(array('change_password'=> $msg), 200);
        } else {
            $error = array('error' => array('Heslo, které jste zadali, je neplatné.'));
            return response()->json([
                'modal_message_danger' , "Heslo, které jste zadali, je neplatné.",
                'message' => $error
            ], 422);
        }
    }
}

И моя всплывающая форма:

                     <div class="modal fade common_modal" id="change_password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h3>Změna hesla</h3>
            </div>
            <div class="modal-body">
                <form role="form" id="password_change_form" class="common_form_style popup_form">
                    <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="submit-btn text-center">
                            <button type="submit"id="submit_form" class="btn btn-default chci" style="background:#e94549;">Uložit</button>
                            </div>
                            <span id="error_message" class="text-danger"></span>
                            <span id="success_message" class="text-success"></span>
                            <div style="margin-top:10px;" id="success-messages"></div>
                        </div>
                        <div class="col-md-12 pull-right"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

и мой route.php

      Route::post('/changepassword',['as'=>'changepassword','uses'=>'HomeController@changepassword']);

Я застрял в этой проблеме, и я не знаю,где я делаю что-то не так, я поделился с вами всеми подробностями, которые покажут вам, где я делаю что-то не так, и почему моя всплывающая форма не сохраняется, когда я нажимаю кнопку «Отправить», ничего не делается

Здесь ваша помощь будет весьма полезнаоценили!Заранее спасибо!

Answer 1

DOM <button> не вызывает событие отправки.вместо этого поместите прослушиватель событий на <form>.

$('#password_change_form').submit(function(e) {
    e.preventDefault();
    var saveThis = this;
    $.ajax({
        type: "POST",
        url: "/changepassword",
        data: $(saveThis).serialize(),
        success: function(change_password) {
            alert(change_password);
        }
    });
}),

в вашем контроллере, вам не нужно делать это

$errors = json_decode($errors); //line 7

$validator->errors() возвращает object, затем вы поворачиваетеон превращается в string(json), затем вы декодируете его обратно в object, а затем в обратном слое переводит его обратно в string(json).

Answer 2

попробуйте это, измените $(this).serialize() вместо $('#password_change_form').serialize()

    $('#submit_form').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/changepassword",
        data: $('#password_change_form').serialize(),
        success: function(change_password) {
            alert(change_password);
        }
    });
}),

может ли это помочь вам