Урок 24. Работа с Ajax в Laravel и загрузка файлов

На этом уроке из серии уроков по Laravel мы разберемся, как отправлять и обрабатывать запросы, отправляемые к сайту на данном фреймворке с помощью JavaScript (jQuery). Информация в данном материале актуальна как минимум для 8 и 9 версий Laravel.



Для сайтов, с содержимым которого посетители активно взаимодействуют, уже по факту стала стандартом работа без обновления страницы. Это быстрее и удобнее для пользователя, для которого и нужны эти сайты. Но вот для разработчика, в том числе и работающего с фреймворком Laravel, это создает некоторые сложности. Правда, решаемые. Давайте ниже их и решим.

Отправка запроса POST AJAX в Laravel

Для начала давайте разберемся, как вообще отправлять обычный POST-запрос на севере в Laravel. Используем jQuery. Код:

    $.post("my-ajax", {
        "_token": "{{ csrf_token() }}",
        info: info
    })
    .done(function(data) {
        var obj = JSON.parse(data);
        if (obj["success"] == true){
            alert(obj["mess"]);
        }
        else {
            alert(obj["err"]);
        }
    });

В примере выше my-ajax – адрес, на который уйдет запрос, а info – это текстовая переменная, так называемая полезная нагрузка запроса, которую отправляем на сервер.

Дальше надо не забыть определить маршрут, по которому пойдет этот post запрос. В web.php добавляем

use App\Http\Controllers\MyAjaxController;

…..

Route::post('/my-ajax', [MyAjaxController::class, 'show']);

И теперь код контроллера

namespace App\Http\Controllers;


use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;



class MyAjaxController extends Controller {

   public function show(Request $request)
    {
        $resp["success"] = true;
        $resp["mess"] = "Отправленная переменная info: " . $request->info; ;

        return json_encode($resp);  

	}
}

Понятно, что код контроллера у вас будет свой, тут просто как пример. Необязательно например преобразовывать в JSON – просто я так привык работать.

Загрузка файла на сервер AJAX в Laravel

Теперь давайте разберем пример посложнее- не просто отправим запрос, но еще и добавим к нему файл, а также потом файл отвалидируем (проверим, чтобы совпадал). Валидация поступающих запросов – это вообще очень важная тема, многие разработчики ей пренебрегают и совершенно зря, так как именно тут одно из немногих мест в Laravel, где пользователь может потенциально сделать что-то нехорошее веб ресурсу.

Здесь нам необходима форма с полем загрузки файла

        <form id="doc_form" method="POST" action="mmy-ajax " enctype="multipart/form-data">
        @csrf
            <input type="file" name="upload_f" id="upload_f">
            <br />
            <button type="submit" id="send_doc" class="button_yellow">Отправить </button>
        </form>

Код JS

$('#doc_form').submit(function(event) {
    event.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        async: true,
        url: 'my-ajax',
        headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST', 
        contentType: false,             
        data: formData,
        cache : false,
        processData: false,
        success: function(result)
        {
            var obj = JSON.parse(result);
        if (obj["success"] == true){
            alert(obj["mess"]);
        }
        else {
            alert(obj["err"]);
        }
        },
        error: function(data)
        {
            var obj = JSON.parse(data);
            alert(obj["err"]);
            alert(data);
        }
    });
});

Обратите внимание на такие моменты:

• Все данные забираются сразу из формы и преобразуются в FormData
• Необходим заголовок X-CSRF-Token, который забирается из текста страницы
• Запрос желательно асинхронный
• processData: false - предотвращение поведения при разборе данных по умолчанию. Иными словами, по умолчанию – это application/x-www-form-urlencoded, а нам надо отправить «сырой» JSON

Теперь код функции-обработчика контроллера

        $validator = Validator::make($request->all(), [
            'upload_f' => 'required|mimes:png,jpg,jpeg,csv,txt,pdf|max:4096'
         ]);

        if ($validator->fails()) {
            $resp["success"] = false;
            $resp["err"] = $validator->errors()->first('upload_f');
            return json_encode($resp);   
        }


$file = $request->file('upload_f');

       $completeFileName = $file->getClientOriginalName();
       $fileNameOnly = pathinfo($completeFileName, PATHINFO_FILENAME);
       $extension = $file->getClientOriginalExtension();
       $file->storeAs("docs/".$completeFileName);

        $resp = array();
        $resp["success"] = true;
        $resp["mess"] = "Документы успешно загружены";


        return json_encode($resp);

Тут мы проверяем, чтобы загруженный файл был картинкой и не больше 4Мб. Затем сохраняем этот файл в папку docs. Она будет находиться в storage и ларавель сам создаст её.

Вот так просто можно работать с AJAX в Laravel.