iOS Safari 无法通过 AJAX 发送表单数据

Question

我正在尝试使用 JavaScript 通过 Ajax 提交表单。它适用于 Browserstack 中的 IE、Firefox、Chrome 和 iOS，但不适用于 iOS Simulator 或真正的 iOS 设备或桌面 Safari。

我试过XMLHttpRequest onload 和XMLHttpRequest onreadystatechange，都没有被触发。据我所知request.open('POST', url, true); 不起作用。 console.log('2'); 也永远不会被触发。

我添加了这个用于调试：

request.send(data);
console.log(request);
setTimeout(function(){ console.log(request); }, 3000);

它们在 Safari 中都返回 readyState: 1，在其他浏览器中第一个返回 readyState: 1 而第二个返回 readyState: 4 符合预期。

这是我的代码精简到基本要素：

$('.ajax-form').submit(function(event) {
  var form = event.target;
  var data = new FormData(form);
  var request = new XMLHttpRequest();
  var method = form.getAttribute("method");
  var action = form.getAttribute("action");
  var url = window.location.href
  request.open('POST', url, true);
  request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  request.setRequestHeader("HTTP_X_REQUESTED_WITH", "XMLHttpRequest");
  request.setRequestHeader("pragma", "no-cache");
  console.log('1');
  request.onreadystatechange = function() {
    console.log('2');
    if (request.readyState === 4 && request.status === 200) {
      var response = JSON.parse(request.response);

      if (response.success && response.finished) {
        // Go to selected success page
        window.location.href = $(form).find('[name="formReturnUrl"]').attr('value');

      } else if (response.errors || response.formErrors) {
        // Deal with errors
      }
    }
  };

  request.send(data);
  console.log(request);
  setTimeout(function() {
    console.log(request);
  }, 3000);
  event.preventDefault();
});

我所有的 iOS 测试都是在 Safari 中的 iOS 11 上进行的。我读过一些关于 iOS 很奇怪的文章，但我还没有找到适合我的解决方案。我做错了什么？

Answer 1

解决了。感谢@mxcoder 为我指明了正确的方向。

Safari（桌面和 iOS）在使用空文件字段创建 FormData 时存在错误。我通过在创建 FormData 之前禁用空文件字段然后立即重新启用它们来解决这个问题，以便在提交 Ajax 后可以重用表单。

我把var data = new FormData(form);改成了这个：

// Disable empty file fields before submitting.
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    var $inputs = $('input[type="file"]:not([disabled])', form);
    $inputs.each(function(_, input) {
        if (input.files.length > 0) return
        $(input).prop('disabled', true);
    });
}

var data = new FormData(form);

// Re-enable empty file fields after creating FormData.
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    $inputs.prop('disabled', false);
}

1. 如果浏览器是 Safari，请禁用空的 <input type="file"> 元素
2. 创建表单数据
3. 如果浏览器是 Safari，请重新启用空的 <input type="file"> 元素。这允许在成功提交或纠正错误后重复使用表单。

Answer 2

有趣的问题，Safari 有时候确实很棘手。

我还没有适合您的解决方案，但您可以尝试以下方法：

1. 尽量不要使用 FormData，也许 iOS 还不能很好地与 XHR + FormData 配合使用，这可能是一个值得报告的错误！
2. 能否分享请求和响应的正文和标头？也许服务器端的某些东西无法处理 iOS 请求，再次，可能是一些错误的标头。