1

Всем добрый день.

Возникла такая проблема. Не отправляются данные на сервер. Нужно взять форму на странице и отправить её на сервер через ajax. Код ниже:

let data = new FormData(document.getElementById("form-create-recipe"));

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$.ajax({
    url: 'recipe/' + $('#save-recipe').attr('data-recipeId'),
    type: 'patch',
    data: data,
    processData: false,
    contentType: false,
    cache: false,
    success: function () {

В первой строке создаю объект формы и в переменную data, насколько я знаю попадают все поля формы у которых есть атрибут name. Небольшой кусочек формы ниже:

<form id="form-create-recipe">
<!-- Block name, description -->
<div class="row mb-3">
    <div class="col my-recipe">
        Добавление рецепта
    </div>
</div>

<div id="recipe-error" class="alert alert-danger" role="alert"></div>

<div class="row">
    <div class="col">
        <div class="form-group row">
            <label for="name" class="col-2 col-form-label">Название</label>

            <div class="col-md-6">
                <input id="name" type="text" class="form-control" name="recipeName" required
                       placeholder="Название рецепта" value="{{ $recipe->name ?? ''}}" autofocus>
            </div>
        </div>

        <div class="form-group row">
            <label for="description" class="col-2 col-form-label">Описание</label>

            <div class="col">
                <textarea id="description" class="form-control" name="description" rows="6" required
                          placeholder="Описание">{{ $recipe->description ?? ''}}</textarea>
            </div>
        </div>
    </div>
</div>

На сервере нет ни единого поля. Фото ниже:

введите сюда описание изображения

Делал уже подобный запрос ранее в своём приложении и он работал, но конкретно сейчас данные не передаются. Может кто-то знает в чём может быть дело?

p.s Разобрался в чём дело, дело в методе запроса. Если отправлять форму методом post, данные приходят, но если patch, нет. Как можно передать форму этим методом?

1 ответ 1

0

В методе ajax библиотеки jQuery необходимо задать параметру method значение 'POST', но в форму также добавить поле _method, используя директиву шаблонизатора Blade 1, 2:

@method('PUT')

Таким образом вы указываете фреймворку Laravel обработать запрос по маршруту обновления сущности:

Route::put($uri, $callback);

Пример отправки AJAX запроса на обновление сущности:

<!--
  В качестве примера разметка формы была упрощена.
  В форму обязательно помещаем `csrf` токен.
  Указываем параметр `@method('PUT')` для маршрутизатора.
  В качестве `action` используется именованный маршрут.
-->

<form id="recipe_update" action="{{ route('recipe.update', $recipe) }}" method="post" enctype="multipart/form-data">
  @csrf
  @method('PUT')

  <input type="text" name="recipeName" value="{{ old('recipeName', $recipe->name) }}" />

  <button type="submit">Обновить данные</button>
</form>

<script type="text/javascript">
  $(document).ready(function() {
    $("#recipe_update:first").submit(function(event) {
      // Отменяем стандартное поведение формы.
      event.preventDefault();

      // Собираем данные с формы.
      // Здесь будут все поля у которых есть `name`,
      // включая метод `_method` и `_token`.
      var data = new FormData(this);

      // Отправляем запрос.
      $.ajax({
        method: 'POST', // начиная с версии 1.9 `type` - псевдоним для `method`.
        url: this.action, // атрибут `action="..."` из формы.
        cache: false, // запрошенные страницы не будут закешированы браузером.
        data: data, // больше ничего тут не надо!
        dataType: 'json', // чтобы jQuery распарсил `success` ответ.
        processData: false, // чтобы jQuery не обрабатывал отправляемые данные.
        contentType: false, // чтобы jQuery не передавал в заголовке поле `Content-Type` совсем.
        success: function(data) {
          console.log(data);
        },
        error: function(error) {
          console.log(error);
        }
      });
    })
  });
</script>

Эти замечания относятся также к patch и delete.

6
  • Спасибо за поправки, но вы отправляете данные методом POST. Разве не нудно отправлять данные методом PUT ?
    – user343315
    7 июл 2019 в 9:24
  • Спасибо, во всём разобрался ).
    – user343315
    7 июл 2019 в 13:34
  • Проблемы не было, просто нужно было переделать и немного прочитать документацию)
    – user343315
    7 июл 2019 в 13:37
  • Извините, забыл отметить. Конечно помог, без вас бы до сих пор наверное разбирался)
    – user343315
    7 июл 2019 в 14:11
  • Вы очень мне помогли ) Получается в ajax запросе теперь можно писать не type, а method?
    – user343315
    8 июл 2019 в 3:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.