Как на php вернуть конкретную ошибку при оправке формы Ajax?

Question

[Mesuti]

Привет!

Форма с помощью Ajax отправляет данные в send.php обработчик и он уже взаимодействует с БазойДанных.

Можно ли прямо в обработчике send.php указывать ошибки типа "Неверный логин" или "Неверный пароль" или сразу обе ошибки и отправлять их на текущую страницу с формой?
Чтобы с помощью JavaScript далее оформлять эти ошибки для пользователя.

Если да, то покажете пример?

Нашел только технологию - передача ошибки в заголовок, но таким образом можно передать только 1 ошибку, да и строго определенные ошибки, да и не безопасно это от инъекций.

Не могу понять, как вообще делают такое.
Неужели можно только ограничиваться обработчиком на текущей странице, где форма отправки данных там и обработчик.

Пример
Ajax

$("form").submit(function(e) {
            e.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "send.php",
                    data: $(this).serialize()
                }).done(function() {
                    // если успешная отправка
                }).fail(function () {
                    // если ошибка отправки
                });
                return false;
            });

Send.php (RedBean.php регистрация пользователя)

// Если такой логин есть, значит ошибка
if ( R::count('users', "login = ?", array($_POST['login'])) > 0)
{
// ХОТЯ И ВОЗНИКАЕТ ОШИБКА, AJAX ОТМЕЧАЕТ УСПЕШНУЮ ОТПРАВКУ. 
// КАК ЕЕ ОТПРАВИТЬ НА ТЕКУЩУЮ СТРАНИЦУ ?
$errors = 'Пользователь с таким Логином уже существует!';
} else
{
// Если логин уникальный - регистрируем юзера
$user = R::dispense('users');
$user->login = $_POST['login'];
$user->password = $_POST['password'];
R::store($user);
}

Comments

[Дмитрий]

Вечер добрый.
Делайте проверки в обработчике, собирайте в массив и возвращайте при помощи json_encode();

[Mesuti]

Дмитрий, Спасибо за ответ. Подкажете, где можно найти пример возврата json ?

[Mesuti]

Вроде нашел, передача json в заголовок?

header('Content-Type: application/json');
echo json_encode(array('foo' => 'bar'));

[Mesuti]

А как прочитать этот json с помощью js на странице с формой ?

И безопасна ли такая передача данных?

[Дмитрий]

Mesuti, там же где и везде, в google.

[Mesuti]

Дмитрий, Было бы все так просто. Второй день в гугле сижу. Это не совсем простая отправка формы Ajax + PHP. А получение ответа от обработчика php и вывод на странице с формой..

[Mesuti]

Нашел похожий ответ на стаке https://ru.stackoverflow.com/questions/85629/Распа...

[Дмитрий]

Это не совсем простая отправка формы Ajax + PHP

Mesuti, чем же она непроста?
Что Вы используете, framework или что?

Answer 1

[Сергей Хлопов]

Код может выглядеть вот так:

$("#form").submit(function(e) {
        e.preventDefault();
            $.ajax({
                dataType: 'json', //Тип данных, в котором ожидается получить ответ от сервера.
                type: "POST",
                url: "send.php",
                data: $(this).serialize()
            }).done(function(response) { // В response находится ответ от сервера который отправлен через echo из send.php
                if(!response.status) {
                    alert("Что-то не так");
                }
                else {
                    alert("Всё ок!");
                }
            }).fail(function () {
                
            });
            return false;
        });

// Если такой логин есть, значит ошибка
if ( R::count('users', "login = ?", array($_POST['login'])) > 0) {
	$response = [
		'messages_error' => 'Пользователь с таким Логином уже существует!',
		'status' => false,
	];
	echo json_encode($response); // Отправляем json ответ от сервера
} 
else {
	// Если логин уникальный - регистрируем юзера
	$user = R::dispense('users');
	$user->login = $_POST['login'];
	$user->password = $_POST['password'];
	R::store($user);
}

И кстати как инструмент для просмотра запросов к серверу и ответов от сервера, можно использовать вкладку Network в DevTools браузер Google Chrome, ну и в других браузерах тоже есть такая вкладка

Comments

[ThunderCat]

как то у вас не до конца продумано, при успешном выполнении скорее всего будет ошибка яваскрипта, вы же ничего не вернули с сервера.

[Mesuti]

Спасибо за вариант!
Буду разбираться..

[Сергей Хлопов]

ThunderCat, ну да, при успешной регистрации можно возвращать status true. И тогда массив который мы превращаем в json вынести выше условий что бы он был доступен и в if и в else, соотвествено в if мы в массив добавляем status false а в else status true. Либо в js проверять что есть ли в response свойство status

[AJIEKC_10]

Сергей Хлопов, вы не знаете как это с консоли dev tools на экран пользователю выводить?

[Сергей Хлопов]

AJIEKC_10, имеете ввиду как ответ сервера отобразить для пользователя ?

[AJIEKC_10]

Сергей Хлопов, да, хочу текст ошибки из response вывести. Вот как у вас на скриншоте "пользователь с таким логином уже существует" нужно выслать на страницу пользователю когда он существующий логин отправляет

[Сергей Хлопов]

AJIEKC_10, response.messages_error.
Либо можно ещё посмотреть что в переменной, вызвать console.log(response) и в dev tools на вкладке Console будет выведено что в данной переменной

[AJIEKC_10]

Сергей Хлопов, на экран не получается, только в консоль
пробывал document.write(response.messages_error);
document.writeln(response.messages_error);
alert(response.messages_error);

ajaxSend(formData)
                    .then((response) => {
                        console.log(response); 
                        form.reset();
                    })
                    .catch((err) => console.error(err))

[Сергей Хлопов]

AJIEKC_10, а ajax запрос выполняется ?

[AJIEKC_10]

Сергей Хлопов, да, всё работает

[Сергей Хлопов]

AJIEKC_10, А в переменной response есть сообщение которое нужно отобразить ?

[AJIEKC_10]

Сергей Хлопов, ну вот такая в обработчике php

$response = [
						'messages_error' => "This user already exists",
						'status' => false
					];

[AJIEKC_10]

Сергей Хлопов, я создал в html пустой див и сделал так:

ajaxSend(formData)
                    .then((response) => {
                        document.getElementById("for_errors").innerText += response.messages_error;
                        form.reset();
                    })

Высвечивается undefined почему-то

[Сергей Хлопов]

AJIEKC_10, Значит в response.messages_error нет сообщения. Попробуйте посмотреть что в этой переменной через console.log. Т.е:

1. Написать в функции которая выполняется после успешной отправки ajax запроса: console.log(response);
   
2. Выполнить действие в браузере что бы ajax запрос отправился;
   
3. И затем смотрим что у нас вывелось на вкладке Console
   

Функция ajaxSend это я так понял какая-то пользовательская ? И внутри неё происходит ajax запрос верно ?

[Сергей Хлопов]

AJIEKC_10, Может ещё вот так: response.data.messages_error, если через axios ajax запрос идёт

[Сергей Хлопов]

AJIEKC_10, Либо можно ещё на вкладке Network посмотреть, возвращает ли сервер какие либо данные на запрос, как на скрине выше

[AJIEKC_10]

Сергей Хлопов, мы в обработчике делали encode_json;
когда я попробовал вывести response полностью своим последним методом у меня вышло отобразить этот json массив. Однако взять с него текст ошибки не получается. Через индексирование выходит брать лишь по букве)
а если так:

const res = JSON.parse(response);
                        document.getElementById("for_errors").innerText += res;

то отображается [object Object]

[Сергей Хлопов]

AJIEKC_10,

когда я попробовал вывести response полностью своим последним методом у меня вышло отобразить этот json массив. Однако взять с него текст ошибки не получается.

Предполагаю из-за того что в response ответ в формате строки. Т.е. не преобразовался в объект JavaScript, а по хорошему должен преобразоваться и далее нужно работали с объектом так все делают.
Что бы получился объект есть два способа:

1. В настройках ajax запроса указать тип данных который ожидаете получить от сервера, к примеру в jQuery это dataType: 'json'; (в ответ выше есть пример) см. документацию jQuery.ajax
   
2. Либо уже после ajax запроса использовать метод JSON.parse(), что бы получить объект (как в коде который вы скинули выше)
   

Лучше конечно первый вариант, но я не знаю с помощью какой библиотеки вы отправляете ajax запрос.
Если второй вариант то можно сделать так:

const res = JSON.parse(response);
document.getElementById("for_errors").innerText += res.messages_error;

Если используйте php код из моего ответа, то там могут быть возможно уязвимости какие нибудь, просто обращаю на это внимание, сам пока не силён в этом поэтому точно сказать не могу что и как

[AJIEKC_10]

В общем я вчера смог-таки вывести это сообщение вот таким образом

ajaxSend(formData)
                    .then((response) => {
                        const res = JSON.stringify(response).split("\\");
                        document.getElementById("for_errors").innerText += res[3];
                        form.reset();
                    })

Хоть и был исчерпан лимит бесполезных комментариев надеюсь они не будут таковыми и это кому-то пригодится)
Сергей Хлопов, спасибо за отклик и участие!

[Сергей Хлопов]

AJIEKC_10, пожалуйста, но я бы сделал по типу как в предыдущем комментарии писал. Но если работает текущий вариант то хорошо

Answer 2

[Антон Неверов]

Рекомендую присмотреться к методологии JSend: https://github.com/omniti-labs/jsend
А вообще, посмотрите, как сделаны API у других. Особенно рекомендую API Telegram ботов как эталон формирования ответов.

Comments

[Mesuti]

Спасибо за ответ!
Буду разбираться..