как сохранить данные из формы?Неверный тип MIME \ "json \": не содержит '/' "," code ": 500

Question

Я пытаюсь сохранить данные, используя ajax

это моя глобальная функция для API, я использую эту глобальную функцию даже для отображения данных в таблице.

  ajax = (action, data, method, callback) => {
    return $.ajax({
      type: method,
      // url: `https://dev2.bliimo.net/${action}`,
      url: `http://localhost:8080/${action}`,
      contentType: 'json',
      beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", `Bearer ${gon.global.currentUser.access_token}`);
      },
      data: { data: data },
      async: !1,
      cache: false,
      error: e => {
        console.log(e.responseText);
        console.log("Error occured");
      }
    });
  };

когда я нажимаю кнопку «добавить новый каталог», появляется модальное окно, внутри модального есть форма Теперь это форма:

<form id="add-new-catalog-form" class="uk-form-stacked" method="post">
            <div class="uk-grid uk-margin-remove uk-padding-remove uk-width-1-1">
              <div class="uk-width-1-3 uk-padding-remove">
                <div>
                  <div class="uk-margin">
                    <label class="uk-form-label uk-text-bold" for="add-catalog-name">Catalog Name</label>
                    <div class="uk-form-controls">
                      <input class="uk-input uk-form-width-medium category-input" id="add-catalog-name"  type="text" autocapitalize="words" placeholder="Catalog Name" />
                    </div>
                  </div>
                  <div class="uk-margin">
                    <label class="uk-form-label uk-text-bold" for="iconimg-output">Icon Image</label>
                    <%= image_tag('', id: 'iconimg-output')%>
                    <div class="js-upload" uk-form-custom>
                      <button class="uk-button uk-button-default upload-cloudinary-icon" type="button" tabindex="-1">UPLOAD</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="uk-width-2-3 uk-margin-remove uk-padding-remove">
                <div class="uk-grid uk-width-1-1 uk-margin-remove uk-padding-remove">
                  <div class="uk-width-1-2 uk-margin-remove uk-padding-remove">
                    <label class="uk-form-label uk-text-bold" for="landingpageimg-output">Landing Page Image</label>
                    <%= image_tag('', id: 'landingpageimg-output')%>
                    <div class="js-upload" uk-form-custom> 
                      <button class="uk-button uk-button-default upload-cloudinary-landing" type="button" tabindex="-1">UPLOAD</button>
                    </div>
                  </div>
                  <div class="uk-width-1-2 uk-margin-remove uk-padding-remove">
                    <label class="uk-form-label uk-text-bold" for="categorypageimg-output">Catalog Cover Image</label>
                    <%= image_tag('', id: 'categorypageimg-output')%>
                    <div class="js-upload" uk-form-custom>
                      <button class="uk-button uk-button-default upload-cloudinary-category" type="button" tabindex="-1">UPLOAD</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="uk-modal-footer uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type='submit'>Save</button>
          </div>
        </form>

когда я нажимаю кнопку сохранения в модальном режиме, она запускает эту функцию Это моя функция отправки:

  $('#add-new-catalog-form').on('submit', e => {
    let catalog_name = $('#add-catalog-name').val();
    let catalog_icon = $("#iconimg-output").attr('src');
    let catalog_landing_image = $('#landingpageimg-output').attr('src');
    let catalog_cover_image = $('#categorypageimg-output').attr('src');
    let data = `name=${catalog_name}&thumbnail=${catalog_icon}&landingPageImage=${catalog_landing_image}&coverImage=${catalog_cover_image}`;
    ajax("api/catalogs", `${data}`, "POST");
  });

там написано " Недопустимый тип пантомимы \" json \ ": не содержит '/'", "код": 500"

как это решить?

Answer 1

Готово!

$('#add-new-catalog-form').on('submit', e => {
    e.preventDefault();
    let catalog_name = $('#add-catalog-name').val();
    let catalog_icon = $("#iconimg-output").attr('src');
    let catalog_landing_image = $('#landingpageimg-output').attr('src');
    let catalog_cover_image = $('#categorypageimg-output').attr('src');
    let data = { "name": catalog_name, "thumbnail": catalog_icon, "landingPageImage": catalog_landing_image, "coverImage": catalog_cover_image };
    ajax("api/catalogs", JSON.stringify(data), "POST");
    window.location.replace("/catalog");
  });

Answer 2

dataType и contentType не совпадают:

dataType: "json",
contentType: "application/json; charset=utf-8",
...