Отправка Ajax формы в Laravel

0
1528

Создадим форму без перезагрузки страницы на фреймворке Laravel с использованием технологии ajax. Для начала пропишем роуты в web.php

 

// Новая страница с формой — вывод
Route::get(‘/feedback’, array(
‘as’ => ‘site.index.feedback’,
‘uses’ => ‘IndexController@feedback’
));

 

// Роут ajax контроллера

Route::post(‘/feedback’, ‘AjaxController@store’);

 

Создадим вид (шаблон с версткой)

 

/resources/views/site/index/feedback.blade.php с формой

 

<form id="dismissal-form" method="POST" action="{{ $url }}">
    {{ csrf_field() }}
    <div class="form-container">
        <h3 class="form-header">Уважаемый коллега!</h3>
        <div class="form-input-container">
            <input name="fio" class="form-text-input" type="text" placeholder="Ф.И.О (по желанию)">
            <input name="position" class="form-text-input" type="text" placeholder="Должность">
            <input name="experience" class="form-text-input" type="text" placeholder="Стаж работы в компании">
        </div>
    </div>
    <input type="button" id="dismissal-form-btn" name="submit" value="Отправить" class="form-submit-button">
</form>

и подключим там же скрипт js для обработки формы

<script src="js/script_form.js"></script>

 

Содержимое файла js/script_form.js

 

$(document).ready(function($) {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $("#dismissal-form-btn").click(
        function(e){
            e.preventDefault();
            $.ajax({
                url:     "/feedback", //url страницы (action_ajax_form.php)
                type:     "POST", //метод отправки
                dataType: "html", //формат данных
                data: $("#dismissal-form").serialize(),  // Сеарилизуем объект
                success: function(response) { //Данные отправлены успешно
                    $(".form-pop-up-text .form-lowertext").html("Спасибо за Ваши ответы и за труд в нашей компании.")
                    $(".form-pop-up-text .form-lowertext1").html("Желаем Вам успехов на новом месте!")
                    $("#pop-up-btn").addClass("success");
                    $(".form-pop-up").show();
                    $(".form-pop-up-text").show();
                    console.log(response);
                },
                error: function(response) { // Данные не отправлены
                    $(".form-pop-up-text .form-lowertext").html("Произошла ошибка")
                    $(".form-pop-up-text .form-lowertext1").html("Попробуйте снова")
                    $(".form-pop-up").show();
                    $(".form-pop-up-text").show();
                    console.log(response);
                }
            });
        }
    );
    $(".pop-up-btn").click(
        function (){
            if (document.getElementById("pop-up-btn").classList.contains("success")) {
                document.location.href = "https://ostrov-chistoty.by";
            }
            else{
                $(".form-pop-up").hide();
                $(".form-pop-up-text").hide();
            }
        }

    )
});

В каталоге контроллеров /app/Http/Controllers/ создадим новый контроллер AjaxController.php

 

Внутри контроллера создаем метод отправки формы:

 

public function store(Request $request)
{
    // email из настроек админки сайта - либо вписываем строго $settings = "info.site.com";
    $settings = $this->getSettings('SettingsSite', 'emails');

    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    $title = ($_POST["fio"] == "" ? "Анонимно" : $_POST["fio"]) . " - " . $_POST["position"] . " - стаж " . $_POST["experience"];

    $text = $title . "<br>";
    $text .= "Текст письма ... ФИО: ".$_POST["fio"];

    mail($settings['recipient_form'], $title, $text, $headers);
    $response = array(
        'status' => 'success',
        'msg' => $request->message,
    );
    return response()->json($response);
}

 

В контроллере /app/Http/Controllers/IndexController.php добавим метод отрисовки шаблона:

 

public function feedback() {
    return view('site.index.feedback', array(
        'url'   => $_SERVER['REQUEST_URI']
    ));
}

 

Проделав все по инструкции, вы сможете создать на Laravel любую форму без перезагрузки на ajax.

 

 

 

 

 

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь