400仅在Safari中发布jQuery ajax时出现错误请求

Question

当我将表单发布到jQuery AJAX时，我突然盯着在Safari中收到400 Bad request错误。我觉得这很奇怪，因为它已经工作了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

有趣的是，我在你的帖子发布后几个小时就在我的一个网站上发现了同样的问题。我同意你的观点，这必须是一个更新的问题，但我无法分辨哪个版本的Safari引入了这个bug。

这就是我想到的：你通过将表格传递给它来构建你的FormData对象，这应该是完全没问题的。但似乎Safari有一个错误：当你通过传递一个带有空文件输入的表单来构造FormData对象时，请求因某种原因而中断。

解决方法：我现在正在初始化一个空的FormData对象并手动添加值，而不是使用var bannerfil = new FormData(formElement);来初始化我的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());
}

Answer 2

谢谢你的回答，它帮助了我！但我没有迭代所有输入，而是决定只检查文件。从formdata中删除文件，然后仅添加空文件：

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);
    }
});