iOS Safari не может отправить данные формы через AJAX

Question

Я пытаюсь отправить форму через Ajax с JavaScript. Он работает в IE, Firefox, Chrome и iOS в Browserstack, но не работает в 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);

Они оба возвращают readyState: 1 в Safari, в других браузерах первый возвращает 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 проводятся на iOS 11 в Safari. Я прочитал несколько вещей о странности 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. Создать FormData
3. Если браузер Safari, включите пустые элементы <input type="file">. Это позволяет повторно использовать форму после успешной отправки или после исправления ошибок.

Answer 2

Интересная проблема, Safari иногда бывает хитрым.

У меня пока нет решения для вас, но вы можете попробовать следующее:

1. Попробуйте не использовать FormData, возможно, iOS пока не очень хорошо работает с XHR + FormData, возможно, это ошибка, о которой стоит сообщить!
2. Можете ли вы поделиться телом запроса и ответа и заголовками? Возможно, на стороне сервера что-то не так для запроса iOS, опять же, возможно, какой-то неуместный заголовок.