Question

我正在尝试使用JavaScript通过Ajax提交表单。它可以在Browserstack中的IE，Firefox，Chrome和iOS上运行，但不能在iOS Simulator或真实的iOS设备或桌面Safari中运行。

我尝试过index_d和XMLHttpRequest onload，但都没有被触发。据我所知XMLHttpRequest onreadystatechange无效。 request.open('POST', url, true);也不会触发。

我为调试添加了它

console.log('2');

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

这是我的代码精简为要点：

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

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

Answer 1

已解决。感谢@mxcoder为我指出正确的方向。

在使用空文件字段创建FormData时，Safari（台式机和iOS）存在一个错误。我通过在创建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);
}

如果浏览器是Safari，请禁用空的<input type="file">元素
创建FormData
如果浏览器是Safari，请重新启用空的<input type="file">元素。这样可以在成功提交或更正错误后重新使用表单。

Answer 2

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

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

尝试不使用FormData，也许iOS在XHR + FormData上不能很好地工作，这可能是一个值得报告的错误！
您可以共享请求和响应正文以及标头吗？也许在服务器端，iOS请求失败，或者是某些标头放错了。

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

2 个答案: