400 Неправильный запрос при публикации jQuery ajax только в Safari

Question

Я неожиданно обнаружил, что в Safari появляется ошибка 400 Bad request, когда я отправляю форму в jQuery AJAX. Я думаю, что это странно, потому что он работал нормально в течение 2-3 лет, и все еще работает в Firefox. Я не уверен, с чего начать отладку, кто-нибудь может мне помочь?

submitHandler: function()
{
var formElement = document.getElementById("frmBanner");
var bannerfil = new FormData(formElement);  
bannerfil.append("gruppe412", $('#gruppe412').val() );

 $.ajax(
 {
     type: "POST",
     url: "/modContent/ajax/banner-copy.php?a=frmBanner&type=45",
     data: bannerfil,
     dataType: "html",
     processData: false,
     contentType: false,
     success: function(data) 
     {
        if( data.length > 10 )
            $("#content").html( data );
        else
          location.href="#modContent/ajax/" + data;

     },
     error: function (xhr, ajaxOptions, thrownError) { alert(xhr.statusText); }
});

return false;
},
// Do not change code below
errorPlacement : function(error, element) {
    error.insertAfter(element.parent());
}
}

Answer 1

спасибо за ваш ответ, он мне помог! но вместо того, чтобы просмотреть все входные данные, я решил проверить только файлы. Удалите файлы из формданных, а затем снова добавьте только не пустые файлы:

let formdata = new FormData(form[0]);
let files = formdata.getAll('upload[]');
formdata.delete('upload[]');
files.forEach(function(fileobject){
    if(fileobject.size){
        formdata.append('upload[]', fileobject);
    }
});

Answer 2

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

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

обходным: Вместо того, чтобы делать var bannerfil = new FormData(formElement); для инициализации моего FormData, я теперь инициализирую пустой объект FormData и добавляю значения вручную. Перед добавлением входного файла я проверяю, действительно ли к нему прикреплены файлы.

formData = new FormData();
var $form = $(this); // <- change this depending on your scope/usecase

// [type="file"] will be handled separately
$form.find('input[name][type!="file"], select[name], textarea[name]').each(function(i, e) {
    if ($(e).attr('type') == 'checkbox' || $(e).attr('type') == 'radio') {
      if ($(e).is(':checked')) {
        formData.append($(e).attr('name'), $(e).val());
      }
    } else {
      formData.append($(e).attr('name'), $(e).val());
    }
});

$form.find('input[name][type="file"]').each(function(i, e) {
    if ($(e)[0].files.length > 0) {
      formData.append($(e).attr('name'), $(e)[0].files[0]); 
    }
});

Изменить для уточнения: В вашем конкретном случае что-то вроде этого должно заставить работать:

submitHandler: function() {
  var formElement = $("frmBanner");
  var bannerfil = new FormData();  

  // [type="file"] will be handled separately
  formElement.find('input[name][type!="file"], select[name], textarea[name]').each(function(i, e) {
    if ($(e).attr('type') == 'checkbox' || $(e).attr('type') == 'radio') {
      if ($(e).is(':checked')) {
        bannerfil.append($(e).attr('name'), $(e).val());
      }
    } else {
      bannerfil.append($(e).attr('name'), $(e).val());
    }
  });

  formElement.find('input[name][type="file"]').each(function(i, e) {
    if ($(e)[0].files.length > 0) {
      bannerfil.append($(e).attr('name'), $(e)[0].files[0]); 
    }
  });

  bannerfil.append("gruppe412", $('#gruppe412').val() );

   $.ajax({
      type: "POST",
      url: "/modContent/ajax/banner-copy.php?a=frmBanner&type=45",
      data: bannerfil,
      dataType: "html",
      processData: false,
      contentType: false,
      success: function(data) {
          if( data.length > 10 )
              $("#content").html( data );
          else
            location.href="#modContent/ajax/" + data;

      },
      error: function (xhr, ajaxOptions, thrownError) { 
          alert(xhr.statusText); 
      }
  });

  return false;
},
// Do not change code below
errorPlacement : function(error, element) {
  error.insertAfter(element.parent());
}