javascript - 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，重新启用empty <input type="file">元素。这允许在成功提交或更正错误后重新使用表单。