Question

当我将表单发布到jQuery AJAX时，我突然盯着在Safari中收到400 Bad request错误。我觉得这很奇怪，因为它已经工作了2到3年了，它仍然在Firefox中运行。我不知道从哪里开始调试，有人可以帮助我吗？

 $scope.exportData = function () {
    alasql('SELECT * INTO XLS("test.xls",?) FROM ?',[mystyle,$scope.items]);
};

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

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

2 个答案: