Вопрос:
Я пытаюсь отправить форму через Ajax с помощью JavaScript. Он работает на 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);
Они оба возвращают 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 странно, но я не нашел решения, которое работает для меня. Что я делаю неправильно?
Лучший ответ:
Решаемые. Благодаря @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); }
- Если браузер является Safari, отключите пустые элементы <input type=»file»>
- Создать форму
- Если браузер является Safari, повторно включите пустые элементы <input type=»file»>. Это позволяет повторно использовать форму после успешной подачи или исправления ошибок.
Ответ №1
Интересная проблема, Safari иногда бывает сложной.
У меня пока нет решения, но вы можете попробовать следующее:
- Попробуйте не использовать FormData, возможно, iOS не играет хорошо с XHR + FormData, это может быть ошибка, достойная отчета!
- Можете ли вы поделиться телом запроса и ответа и заголовками? Возможно, что-то на стороне сервера не работает для запроса iOS, опять-таки, может быть, некорректный заголовок.
