erbaev.ai
Главная/Статьи/Laravel: Работа с AJAX запросами на чистом Javascript без jQuery зависимости
Laravel

Laravel: Работа с AJAX запросами на чистом Javascript без jQuery зависимости

Формы и кнопки на сайтах отправляют данные без полной перезагрузки страницы благодаря XMLHttpRequest. Покажем, как делать AJAX-запросы без jQuery, используя стандартный JavaScript.

Базовый пример AJAX

Запрос отправляется при загрузке страницы:

window.onload = function () {
  sendRequest();
}

function sendRequest(){
  var request = new XMLHttpRequest();
  request.open('GET', '/request');
  request.send();

  request.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200){
      var response = request.responseText;
      console.log(response);
    }
  }
}

XMLHttpRequest — это класс для асинхронных браузерных запросов. Проверка readyState == 4 подтверждает получение ответа, status == 200 — его корректность.

Зависимый выпадающий список

Практический пример — динамическая загрузка категорий при смене типа:

{{ Form::select('type', ['places' => 'Места', 'events' => 'События'],
    $node->type, ['onchange' => 'getCategory(this)']) }}
{{ Form::select('category', [...], $node->category, ['id' => 'categories']) }}
function getCategory(type){
  var request = new XMLHttpRequest();
  var params = "type="+type.value;

  request.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200){
      document.getElementById("categories").innerHTML =
        request.responseText;
    }
  }

  request.open('GET', '/get-category?'+params, true);
  request.send();
}

PHP контроллер

public function getCategory(Request $request){
  if ($request->type == 'places'){
    $cat = new \App\Category;
    $terms = $cat->placeCategory();

    foreach ($terms as $key => $item) {
      echo "";
    }
  }
}

Laravel автоматически преобразует массивы в JSON при возврате. Коды ответа: 200 — успех, 404 — не найдено, 500 — ошибка сервера.

Все статьи