Урок 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.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Читайте также:
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.