Почему после запроса xhr вообще ничего не возвращается? (хотя на самом деле ответ есть)?

Question

[suhuxa1]

Ситуация такая - отправляю на сервер данные, взамен возвращается либо bad либо good. Почему-то formdata через jquery ajax отправляться не хочет, а там с получением ответа проблем никогда не было. А вот xhr возвращает пустоту. Код такой:

formData.append("name", $('.name-form').val());
    formData.append("tel", $('.tel-form').val());
    formData.append("email", $('.email-form').val());
    formData.append("txt", $('.text-form').val());
    formData.append("myFile", $('#files-form')[0].files[0]);
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/ss/js/sender.php");
    xhr.send(formData);

   console.log(xhr.status);
   console.log(xhr.statusText);
   console.log(xhr.responseText);

Из 3-х console.log возвращается только статус. И равен он 0. Прочитал, это может быть, если сервер ответа не дал. Но на самом деле данные все обработались, ушли на почту, и ответ был возвращен, если верить инспектору:


В чем может быть проблема? И да, сервер возвращает ответ простым кодом:

if($r) {
    echo 'good';
}
else {
    echo 'bad';
}
exit;

Может как-то иначе ответ выводить? Но jquery ajax такие всегда отлично обрабатывал...А по нему сейчас не отправляется, пишет что проблема в append у formData. Хотя xhr таких проблем не находит.

Comments

[Сергей Сергей]

Это асинхронность, гуглить onreadystatechange и события.

Answer 1

[Анатолий Медведев]

подпишитесь на события

var request = new XMLHttpRequest();
request.open("POST", "/ss/js/sender.php");

request.onload = function() {
   console.log(request.status);
   console.log(request.statusText);
   console.log(request.responseText);
};

request.onerror = function() {
   console.log(request.status);
   console.log(request.statusText);
   console.log(request.responseText);
};

request.send(formData);

Comments

[suhuxa1]

спасибо добрый человек)

Answer 2

[Negwereth]

onreadystatechange

Answer 3

[Павел Корнилов]

<form method="POST" name=f action="/PHP/TesT.php" onsubmit="return false;">
		<input type="text" name="name" value=Вова>
		<input type="text" name="family" value=Пупкин>
		<input type="text" name="data" value=value>
		<button name="submit" onclick="sendForm(this.parentNode); return false;">Отправить</button>
	</form>

'use strict';
	function sendForm (f) { // 
		var button= f.submit;

			var xhr = new XMLHttpRequest();
			// console.log('xhr= ', xhr);
			xhr.open('POST', f.action, true);
			var fS= new FormData(f);
			xhr.send(fS); 
			console.log('fS= ', fS);
			
			xhr.onreadystatechange = function() { 
				if (xhr.readyState != 4) {
					console.log('xhr.readyState= ', xhr.readyState);
					return;
				}
				
				button.textContent = 'Готово!';
				alert(xhr.status != 200 ? xhr.status + ': ' + xhr.statusText: xhr.responseText);
			}

			button.textContent = 'Загрузка...'; 
			button.disabled = true;
	}

sendForm(ваша форма);

А вообще не понимаю, зачем использовать jQuery, но при этгом не пользоваться встроенным в него функционалом по отправке AJAX.