主页 / 问题 / 1573791
Accepted
XlAlbertlX
Asked:2024-03-29 16:39:23 +0000 UTC2024-03-29 16:39:23 +0000 UTC

如何发送服务器响应以便在客户端执行js脚本？

  • 772

我正在注册一个用户。我想添加对电子邮件是否存在的检查。那些。在 Node.js 服务器上，检查电子邮件是否存在，如果存在，用户应该收到消息“拥有此电子邮件的用户已存在！”。我想通过在电子邮件输入字段下插入一个块来做到这一点。怎么做？
这是服务器的响应。我似乎让客户端接受了响应，但我不知道如何传递错误。

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));
});
javascript

1 个回答

  1. Best Answer

    您只能在服务器在前端响应之后插入，位于fetch或中的某个位置axios。

    检查后，服务器应该向前端返回一个错误和关于用户重复电子邮件的响应。然后在目标表单中找到电子邮件并在其后粘贴所需的内容。

    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);
    });
});

    • 0

相关问题