Как отправить ответ сервера так, чтобы на клиенте выполнился js-скрипт?

Question

Делаю регистрацию пользователя. Хочу добавить проверку на существование email. Т.е. на node.js сервере проверяется наличие email, и если он существует, пользователь должен получить сообщение "Пользователь с таким email уже существует!". Хочу сделать это вставкой блока под поле с вводом email. Как это сделать?
Вот ответ с сервера. Я вроде сделал, чтобы клиент принимал ответ, но не знаю, как передать ошибку.

app.post('/registration', (req, res) => {
    if (!req.body) return res.sendStatus(400);

    const fullname = req.body.name.split(' ');

    const email      = req.body.email,
          name       = fullname[0],
          last_name  = fullname[1],
          pass       = req.body.pass,
          repass     = req.body.double-pass;

    let query = 'SELECT EXISTS(SELECT email FROM users WHERE email =?) AS emailExists';
    const connection = sqlconnect();

    connection.query(query, [email], (err, result) => {
        console.log(result);
        if (result[0].emailExists === 1) {
            res.send('email уже есть');
        } else {
          let insert = 'INSERT INTO users (email, name, last_name, password) VALUES (?,?,?,?)';
          connection.query(insert, [email, name, last_name, pass]);
        }
      })

    // res.render('auntefication/registration');
});

Клиент

const formButton = document.getElementById('formButton');
const form = document.getElementById('reg');

formButton.addEventListener('click', function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    const searchParams = new URLSearchParams(formData);
    fetch('/registration', {
        method: 'POST',
        body: searchParams
    }).then(response => response.text()).then(data => {
        console.log(data); // Выводим ответ от сервера в консоль
    }).catch(error => {
        console.error('Error:', error);
    });
    
    fetch('/registration', {
        method: 'GET'
    }).then(res => res.text())
    .then(message => alert(message));
});

Answer 1

Вставить сможете только после ответа сервера на фронтенде, где-нибудь в fetch или axios.

Сервер после проверки должен вернуть на фронт ошибку и ответ о дублировании email пользователя. Затем найти в целевой форме email и вставить после нее нужное содержимое.

const formButton = document.getElementById('formButton');
const form = document.getElementById('reg');

formButton.addEventListener('click', function(event) {
  event.preventDefault();
  const formData = new FormData(form);
  const searchParams = new URLSearchParams(formData);
  fetch('/registration', {
      method: 'POST',
      body: searchParams
    })
    .then(response => response.text())
    .then(data => {
      form
        .querySelector('input[name=email]')
        .insertAdjacentHTML('afterend', `<span>${data}</span>`)
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

БЛОГ НА HUSL

Как отправить ответ сервера так, чтобы на клиенте выполнился js-скрипт?

Ответы (1 шт):