Что здесь от меня требуется?

Question

[Andrey Zeloff]

Не могу вникнуть в суть задания:

Если валидация прошла успешно, кнопка отправки формы должна стать неактивной и должен отправиться ajax-запрос на адрес, указанный в атрибуте action формы.*

Может быть 3 варианта ответа на запрос с разным поведением для каждого:
a. {"status":"success"} – контейнеру resultContainer должен быть выставлен класс success и добавлено содержимое с текстом "Success"
b. {"status":"error","reason":String} - контейнеру resultContainer должен быть выставлен класс error и добавлено содержимое с текстом из поля reason
c. {"status":"progress","timeout":Number} - контейнеру resultContainer должен быть выставлен класс progress и через timeout миллисекунд необходимо повторить запрос (логика должна повторяться, пока в ответе не вернется отличный от progress статус)

* Для простоты тестирования сабмита формы можно выполнять запросы на статические файлы с разными подготовленными вариантами ответов (success.json, error.json, progress.json). Поднимать отдельный сервер с выдачей разных ответов будет избыточным.

Долго не могу понять, куда отправлять ajax-запрос, ибо нигде не указано никаких адресов.
Про статические файлы тоже непонятно.
Кто поможет разобраться, буду благодарен.

Comments

[Александр Шаповал]

В задании же все написано понятно, чем могу помочь так это процитировать его

Answer 1

[Artem0071]

Тут сказано "Поднимать отдельный сервер с выдачей разных ответов будет избыточным", в замен полноценного сервера нужно сделать это: "сабмита формы можно выполнять запросы на статические файлы".

Т.е. создаете отдельный файл server.js или server.php и в нем прописываете код, который будет генерировать рандомно один из ответов, в качестве ответов можно использовать заранее подготовленные (success.json, error.json, progress.json).

PS. Можно заместо вас попробоваться на вакансию?))

Answer 2

[Семён Белоглазов]

1. Про адресы. Насчет этого спросите у своего заказчика.
2. Если валидация прошла успешно, кнопка отправки формы должна стать неактивной и должен отправиться ajax-запрос на адрес, указанный в атрибуте action формы.* Пишете success: function(data) обработчик, в котором проверяете data['status'] и в зависимости от значения делаете блокировку кнопки или если нужно, делаете еще один ajax запрос. Без разницы.
3. Статические файлы. Заказчик имел ввиду, что можно заранее загрузить на сервер обычные текстовики, которые при заходе будут выдавать какой-то один json ответ, чтобы вы потренировались.

Answer 3

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

Должна быть часть задания с html-формой, в которой в атрибуте action должен стоять адрес динамического обработчика запроса.
Если рассмотреть в самом простом варианте, когда страница делает запрос сама себе, то это будет выглядеть примерно так:

UPD прошу прощения, набросал без тестирования, сейчас подправил до полностью рабочего варианта.

<form method="POST" name=f1 action="">
	<input type="text" name="data" value=value>
	<button name="submit" onclick="sendForm(); return false;">Отправить</button>
</form>

<script type="text/javascript">
function sendForm () { // 
	var f1= document.forms.f1,
		button= f1.submit;
	console.log('f1= ', f1);

	// very stuped validation
	if(f1.data.value.length) {
		var xhr = new XMLHttpRequest();
		console.log('xhr= ', xhr);
		xhr.open('POST', f1.action, true);
		var f1v= new FormData(f1);
		xhr.send(f1v); 
		console.log('f1v= ', f1v);

		
		xhr.onreadystatechange = function() { 
			if (xhr.readyState != 4) {
				console.log('xhr.readyState= ', xhr.readyState);
				return;
			}
			
			button.innerHTML = 'Готово!';

			if (xhr.status != 200) {
				alert(xhr.status + ': ' + xhr.statusText);
			} else {
				alert(xhr.responseText);
			}

		}

		button.innerHTML = 'Загружаю...'; 
		button.disabled = true;
	} else console.log('f1.data.length= ', f1.data.length);
}




</script>

<?php
if(!empty($_POST['data'])) echo 'Выдаём какие-то данные' ;
elseif(isset($_POST['data'])) echo 'Чего-то не вышло';

?>

Пример работы: https://js-master.ru/?Javascripts___Бесплатные_скр...