На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



тегистатьи IT, уроки по Laravel, laravel, php, ajax

Читайте также:




Любительское преступление
Урок 8. Циклы: for, while и do while


© upread.ru 2013-2022
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.