Запросы Ajax в Laravel

Ajax или асинхронный JavaScript и XML - одна из самых красивых частей веб-страниц для создания запроса к внутреннему серверу из приложения на основе Laravel или PHP, поскольку он потенциально останавливает загрузку страницы без необходимости для такой небольшой задачи, как «Оценить сообщение» или « Комментирование сообщения », а также экономит много ресурсов, и многие HTTP-запросы не вызываются, как веб-страница, выполняемая при каждой загрузке страницы.

Выполнить вызов ajax с использованием библиотеки, такой как jQuery, Axios, fetch api и т. Д., Не так уж и сложно, или даже вы можете использовать ванильный javascript для создания Ajax или XMLHttpRequest.

В этом блоге я расскажу о том, как сделать запрос ajax из вашего приложения на laravel с помощью jQuery. Существуют и другие библиотеки, вы можете использовать любую из них.

В своих предыдущих блогах я рассказывал об аутентификации, мульти-авторизации, отношениях и многих других темах о Laravel. Не забудьте проверить их.

Запрос jQuery Ajax

Сделать базовый запрос ajax без каких-либо накладных расходов очень просто. Если вы хотите узнать обо всех методах, доступных в jQuery для выполнения запроса ajax, посетите это:

Начнем с простого запроса на получение данных пользователя.

Прежде всего, мы должны добавить jQuery cdn или мы можем включить весь пакет. В этом блоге я буду использовать CDN следующим образом:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Добавьте это в файл макетов, который вы использовали для включения в свой файл лезвия, в конце раздела тела.

Делаем запрос из файла лезвия:

<div class="user__info p-3">
    <small class="error text-danger mb-2 d-block"></small>
</div>
    <button class="btn btn-primary" data-id="{{ auth()->id() }}" onclick="fetchData(this)">
       Fetch My Data
</button>
<script>
    function fetchData(e){
        let id = e.dataset.id
        $.ajax({
            type:'GET',
            url:"{{ route('user.data') }}",
            //dataType:'html', (optional)
            //headers:{ (optional)
               'accept':"Application/json",
               'content-type':"Application/json"
            //},
            data:{id},
            success:function(data){
                $('.user__info').html(data)
             },
             error:function(err){
                  const error = JSON.parse(err.responseText).message
                   $('.error').html(error)
              }
        })
    }
</script>

В приведенном выше коде fetchData () - это функция, которая используется для отправки запроса ajax с помощью функции $ .ajax (), доступной в библиотеке jQuery.

Мы должны проложить маршрут перед всем, что есть в файле routes / web.php, например:

Route::group(['middleware'=>'auth'],function(){
Route::get('user/data',       [App\Http\Controllers\UserController::class,'getData'])-   >name('user.data');
});

Метод getData () UserController выглядит примерно так:

public function getData(Request $request){
    $user_id = $request->id;
    $user = User::find($user_id)->first(['name','email','mobile']);
    // $user = auth()->user();
    return view('users.data',compact('user'));
}

В приведенном выше методе у нас есть два варианта выборки пользователя. Один из них - использование фасада auth (), а другой - отправка идентификатора в качестве параметра получения, а затем выборка пользователя по этому идентификатору. Я упомянул оба метода выше.

Мы возвращаем блейд-файл представления users.data, который содержит внутри соответствующий html и выглядит примерно так:

<table border="1"  cellpadding="8" cellspacing="8">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
        </tr>
    </thead>
    <tbody>
          <tr>
              <td>{{ $user->name }}</td>
               <td>{{ $user->email }}</td>
               <td>{{ $user->mobile }}</td>
          </tr>
    </tbody>
</table>

Еще одна вещь, на которой я хочу сосредоточиться здесь, - это при использовании метода POST вы должны отправить токен csrf, поскольку каждый запрос в Laravel защищен токеном csrf, поэтому мы можем сделать почтовый запрос и отправить токен csrf следующим образом:

//change the type to "POST" in $.ajax({}) method and in web.php file
$.ajaxSetup({
    headers : {
       'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
    }
});

Вот и все ... Теперь вы можете отправлять любой объем данных или запрашивать и получать данные без необходимости перезагружать страницу.

Спасибо, что читаете блог. Я надеюсь, что вам понравился блог, и если вы это сделаете ... нажмите значок хлопка, и если вы хотите читать больше таких блогов ... подписывайтесь на меня.

Весь код этого блога загружен на github здесь: