时间戳

首页 > 解决方案 > 如何保存表单中的数据？无效的 mime 类型 \"json\": 不包含 '/'","code":500

javascript - 如何保存表单中的数据？无效的 mime 类型 \"json\": 不包含 '/'","code":500

问题描述

我正在尝试使用 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");
  });

它说“无效的 mime 类型 \"json\": 不包含 '/'","code":500 "

如何解决这个问题？

标签： javascriptjqueryhtmlajaxspring-boot

解决方案

完毕！

$('#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");
  });

推荐阅读