Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помощь с ответом сервера клиенту (https://javascript.ru/forum/misc/69999-pomoshh-s-otvetom-servera-klientu.html)

АнонимныйПарень 02.08.2017 16:37
Помощь с ответом сервера клиенту
 
Если в коде увидите "swal", не пугайтесь, это фреймворк Sweet Alerts. От обычного alert'a отличается только дизайном!


Есть клиентский код (если точнее - функция).
function verify_auth () {
	var email = $('#inputEmail').val();
	var password = $('#inputPassword').val();

	$.ajax ({
		url : '/autorizate',
		type : 'POST',
		cache : false,
		data : {'email' : email, 'password' : password},
		dataType  : 'html',
		beforeSend : function () {
			$('#verificatebtn').attr('disabled', 'disabled');
		},
		success : function (data) {
			if (data == true) {
				email.val(" ");
				password.val(" ");

				swal({
					title : 'Успех!',
					text : 'Выполняется вход в ваш профиль...',
					type : 'success',
					confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
				});
			}
			else {
				if (data == false) {
					swal({
						title : 'Ошибка!',
						text : 'Что-то пошло не так! Попробуйте ввести данные корректно еще раз!',
						type : 'error',
						confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
					});
				}
			else {
				if (email == '') {
					swal({
						title : 'Ошибка!',
						text : 'Введите email правильно!',
						type : 'error',
						confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
					});
					$('#inputEmail').css("border-color", "red");
				}
				if (password == '') {
					swal({
						title : 'Ошибка!',
						text : 'Введите пароль правильно!',
						type : 'error',
						confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
					});
					$('#inputPassword').css("border-color", "red");
				}
				if (!(email.match('@'))) {
					swal({
						title : 'Ошибка!',
						text : 'Адрес должен содержать символ "@", а после него домен!',
						type : 'error',
						confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
					});
					$('#inputEmail').css("border-color", "red");
				}
			}
				$('#verificatebtn').removeAttr('disabled');
			}	
		}
	});
};


На сервере есть обработчик:
app.post("/autorizate", urlencodedParser, function (req, res) {
	var	data = {
		email_val : req.body.email,
		password_val : req.body.password
	};

    console.log(data.email_val);
    res.send(data);
});


Все работает, но я не понимаю, почему не появляется alert-оповещение (swal), о том что "Выполняется вход в ваш профиль...". Если можете скорректируйте код слегка.

Nexus 02.08.2017 17:03
Я всегда думал, что если делаешь дополнительную валидацию форм, то она обязана предшествовать запросу и в случае инвалидности формы не допускать создания запроса.
У вас всё наоборот)

В начало блока «success» затолкайте строку 
console.log(data,data==true);

И посмотрите, что в консоль будет выведено.

АнонимныйПарень 02.08.2017 20:34
Цитата:
Сообщение от Nexus (Сообщение 460421)
Я всегда думал, что если делаешь дополнительную валидацию форм, то она обязана предшествовать запросу и в случае инвалидности формы не допускать создания запроса.
У вас всё наоборот)

В начало блока «success» затолкайте строку 
console.log(data,data==true);

И посмотрите, что в консоль будет выведено.
НЕ СОВСЕМ ВАС ПОНЯЛ! Пожалуйста, объясните!
Я вас понял так:

function verify_auth () {
	var email = $('#inputEmail').val();
	var password = $('#inputPassword').val();

	if (email == '') {
		swal({
			title : 'Ошибка!',
			text : 'Введите email правильно!',
			type : 'error',
			confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
		});
		$('#inputEmail').css("border-color", "red");
	}
	else if (password == '') {
		swal({
			title : 'Ошибка!',
			text : 'Введите пароль правильно!',
			type : 'error',
			confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
		});
		$('#inputPassword').css("border-color", "red");
	}
	else if (!(email.match('@'))) {
		swal({
			title : 'Ошибка!',
			text : 'Адрес должен содержать символ "@", а после него домен!',
			type : 'error',
			confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
		});
		$('#inputEmail').css("border-color", "red");
	}
	else {
		$.ajax ({
			url : '/autorizate',
			type : 'POST',
			cache : false,
			data : {'email' : email, 'password' : password},
			dataType  : 'html',
			beforeSend : function () {
				$('#verificatebtn').attr('disabled', 'disabled');
			},
			success : function (data) {
				console.log(data,data==true);

				if (data == true) {
					$('#inputEmail').val(" ");
					$('#inputPassword').val(" ");

					swal({
						title : 'Успех!',
						text : 'Выполняется вход в ваш профиль...',
						type : 'success',
						confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
					});

					$('#verificatebtn').removeAttr('disabled');
				}
				else if	(data == false) {
					swal({
						title : 'Ошибка!',
						text : 'Что-то пошло не так...',
						type : 'success',
						confirmButtonText : '<button class="btn btn-link" style="text-decoration: none; color: white; font-size: 2rem;"> OK </button>'	
					});
				}
			}
		});
	}
};


Но так сервер не отвечает ничего и кнопка не возвращается в "активное" состояние. В консоли ничего, а в консоли браузера у data == true значение false

Вот код сервера:

app.post("/autorizate", urlencodedParser, function (req, res) {
	var	data = {
		email_val : req.body.email,
		password_val : req.body.password
	};

    res.send(data);
});

Nexus 03.08.2017 09:27
Цитата:
Сообщение от АнонимныйПарень (Сообщение 460427)
Но так сервер не отвечает ничего и кнопка не возвращается в "активное" состояние. В консоли ничего, а в консоли браузера у data == true значение false
Вы правильно поняли, что я имел ввиду.
Если сервер не возвращает результат, то тут проблема не в js на стороне клиента, а на стороне сервера.
Удаление атрибута disabled у вас в коде происходит только в случае успешного прохождения авторизации.

С серверным js я не знаком.

PS. у вас метод ajax ожидает от сервера html-контент, а получает явно не его (вероятно json), можно попробовать удалить эту строку:
dataType  : 'html',

Dilettante_Pro 03.08.2017 10:50
АнонимныйПарень,
Данные, передаваемые на сервер
{'email' : email, 'password' : password},

Обработка на сервере
var	data = {
		email_val : req.body.email,
		password_val : req.body.password
	};

Что за body в обработке на сервере? Откуда?

АнонимныйПарень 04.08.2017 14:22
Цитата:
Сообщение от Dilettante_Pro (Сообщение 460492)
АнонимныйПарень,
Данные, передаваемые на сервер
{'email' : email, 'password' : password},

Обработка на сервере
var	data = {
		email_val : req.body.email,
		password_val : req.body.password
	};

Что за body в обработке на сервере? Откуда?
Это bodyParser. Специальная штука для обработки данных которые приходят


Часовой пояс GMT +3, время: 04:07.