Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.08.2018, 16:55
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Ошибка работы скрипта
Скрипт отправки формы на сервер через Ajax должен выводить три картинки в зависимости от ситуации: ожидание ответа сервера, успешная отправка, сбой. Однако и на локальном сервере и на хостинге при отправке формы он выдает все время только одну картинку, первую (ожидание ответа). При этом, если картинки заменить текстовыми сообщениями, то все работает нормально и после отправки формы появляется сообщение об успешной операции.

let message = new Object();


let form = document.getElementsByClassName('main-form')[0],
	input = form.getElementsByTagName('input'),
	statusMessage = document.createElement('div');

	form.addEventListener('submit', function(event) {
		event.preventDefault();
		form.appendChild(statusMessage);

		// AJAX
		let request = new XMLHttpRequest();
			request.open("POST", 'server.php')
			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

		let formData = new FormData(form);
			request.send(formData);

		request.onreadystatechange = function() {
			if (request.readyState < 4) {
				//Добавляем картинку при ожидании отправки формы
				statusMessage.classList.add('form-awaiting');
			} else if (request.readyState === 4) {
				if (request.status == 200 && request.status < 300) {
					//Добавляем картинку при удачной отправке формы
					statusMessage.classList.add('form-success');				
				}
				else {
				//Добавляем картинку при неудачной отправке формы
				statusMessage.classList.add('form-failure');
				}
			}
		};
		//Очистка инпутов
		for (let i = 0; i < input.length; i++) {
			input[i].value = '';
		}
	});

//Оправка данных с формы в разделе "Контакты"
let contactForm = document.getElementById('form'),
	contactFormInput = contactForm.getElementsByTagName('input');

	contactForm.addEventListener('submit', function(event) {
		event.preventDefault();
		contactForm.appendChild(statusMessage);

	// AJAX
	let request = new XMLHttpRequest();
			request.open("POST", 'server.php')
			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

	let contactFormData = new FormData(contactForm);
		request.send(contactForm);	

		request.onreadystatechange = function() {
			if (request.readyState < 4) {
			//Добавляем картинку при ожидании отправки формы
				statusMessage.classList.add('form-awaiting__contact-form');
			} else if (request.readyState === 4) {
				if (request.status == 200 && request.status < 300) {
					//Добавляем картинку при удачной отправке формы
					statusMessage.classList.add('form-success__contact-form');	
				}
				else {
				//Добавляем картинку при неудачной отправке формы
				statusMessage.classList.add('form-failure__contact-form');
				}
			}
		};
		//Очистка инпутов
		for (let i = 0; i < contactFormInput.length; i++) {
			contactFormInput[i].value = '';
		}
	});
Ответить с цитированием
  #2 (permalink)  
Старый 26.08.2018, 17:12
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

DVV, поменяй в css порядок следования классов form-[x]__contact-form

Ну или добавь при readyState === 4:
statusMessage.classList.remove('form-awaiting__contact-form');
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 26.08.2018, 17:49
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Не помогло
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2018, 12:05
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

В режиме симуляции запроса все работает...
<style>
.form-awaiting {
   background-image: url(http://javascript.ru/cat/list/project.jpg);
}
.form-success {
   background-image: url(http://javascript.ru/cat/list/donkey.gif);
}
.form-failure {
   background-image: url(http://javascript.ru/cat/list/js.gif);
}
</style>
<div class="main-form">
   <input type="text">
</div>
<script>
let form = document.querySelector('.main-form'),
	request = form.querySelector('input'),
	statusMessage = document.createElement('div'),
         i = 0;
         statusMessage.style="width:50px;height:50px;";
         form.appendChild(statusMessage);


		request.onchange = function() {
                         var classList = statusMessage.classList;
                         while (classList.length > 0) {
                              classList.remove(classList.item(0));
                         }
			if (request.value == "1") {
			//Добавляем картинку при ожидании отправки формы
				statusMessage.classList.add('form-awaiting');
			} else if (request.value == "2") {
				
					//Добавляем картинку при удачной отправке формы
					statusMessage.classList.add('form-success');	
				}
				else {
				//Добавляем картинку при неудачной отправке формы
				statusMessage.classList.add('form-failure');
				
			}
		};
function send(){
   setTimeout(function(){
      i = Math.round(Math.random() * 2) + 1;

          request.value = i;
          var event = new Event('change');
          request.dispatchEvent(event);
          send();

   },2000)
}
send();
</script>


Непринципиальный момент, но у вас лишнее условие
if (request.status == 200 && request.status < 300)

Уж если равно 200, то что еще нужно?

Последний раз редактировалось Dilettante_Pro, 27.08.2018 в 14:00.
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2018, 12:34
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Dilettante_Pro, onreadystatechange вызывается несколько раз по мере обработки запроса.
DVV, что значит не помогло? Смотрим, сейчас у тебя примерно так:
<style>
#statusMessage{
  width:100px;
  height:100px;
}
.form-success:after {
   content:"form-success"
}
.form-failure:after {
   content:"form-failure"
}
.form-awaiting:after {
   content:"form-awaiting" 
}
</style>


<div id="statusMessage">result: </div>

<script>
let request = new XMLHttpRequest();
request.open("GET", location.href)
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState < 4) {
    //Добавляем картинку при ожидании отправки формы
    statusMessage.classList.add('form-awaiting');
  } else if (request.readyState === 4) {
    if (request.status == 200) {
      statusMessage.classList.add('form-success');               
    }
    else {
      statusMessage.classList.add('form-failure');
    }
  }
};
</script>
Меняешь классы местами, и внезапно работает:
<style>
#statusMessage{
  width:100px;
  height:100px;
}
.form-awaiting:after {
   content:"form-awaiting" 
}
.form-success:after {
   content:"form-success"
}
.form-failure:after {
   content:"form-failure"
}
</style>


<div id="statusMessage">result: </div>

<script>
let request = new XMLHttpRequest();
request.open("GET", location.href)
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState < 4) {
    //Добавляем картинку при ожидании отправки формы
    statusMessage.classList.add('form-awaiting');
  } else if (request.readyState === 4) {
    if (request.status == 200) {
      statusMessage.classList.add('form-success');               
    }
    else {
      statusMessage.classList.add('form-failure');
    }
  }
};
</script>
чудесно, неправда ли?

Или второй предложенный вариант:
<style>
#statusMessage{
  width:100px;
  height:100px;
}
.form-success:after {
   content:"form-success"
}
.form-failure:after {
   content:"form-failure"
}
.form-awaiting:after {
   content:"form-awaiting" 
}
</style>


<div id="statusMessage">result: </div>

<script>
let request = new XMLHttpRequest();
request.open("GET", location.href)
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState < 4) {
    //Добавляем картинку при ожидании отправки формы
    statusMessage.classList.add('form-awaiting');
  } else if (request.readyState === 4) {
    statusMessage.classList.remove('form-awaiting');
    if (request.status == 200) {
      statusMessage.classList.add('form-success');               
    }
    else {
      statusMessage.classList.add('form-failure');
    }
  }
};
</script>
__________________
29375, 35

Последний раз редактировалось Aetae, 27.08.2018 в 12:38.
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2018, 13:49
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Aetae
onreadystatechange вызывается несколько раз по мере обработки запроса.
У меня в симуляции request.onchange вызывалось 3 раза.

Переделал на бесконечный цикл со случайным параметром и добавил очистку classList.

Последний раз редактировалось Dilettante_Pro, 27.08.2018 в 14:03.
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2018, 14:10
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Супер! Теперь заработало. Я, правда, немного код под себя подправил, но теперь все как часы работает. Спасибо))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка скрипта сайта госзакупки strannik23 Javascript под браузер 2 28.12.2016 15:03
Как можно получить результат работы php скрипта после отправки данных через ajax nina_ jQuery 5 14.11.2016 14:17
Как поставить анимацию во время работы скрипта? olegalimov Events/DOM/Window 3 24.07.2016 09:44
Ошибка работы sqlite3 модуля Aндрей Node.JS 4 13.07.2015 13:38
FF. Ошибка при выполнении скрипта. nordek Firefox/Mozilla 9 18.07.2011 23:58