MongoDB
 sql >> Base de Dados >  >> NoSQL >> MongoDB

Envie dados do NodeJS de volta para a mesma página html após o envio do formulário


Você não pode enviar dados para uma página HTML. HTML é um formato de arquivo estático e não pode receber dados por si só. Um servidor pode, mas não um arquivo HTML.

O que você pode fazer, no entanto, é interceptar sua solicitação de postagem no lado do cliente, enviá-la para o cliente usando XHR e receber de volta os dados no lado do cliente novamente, faça o que quiser quando o script receber datos . Basicamente tudo acontece entre a parte JavaScript da página e o servidor Node que recebe os dados POST e envia de volta datos .

Aqui está um exemplo simples de como você pode interceptar a solicitação POST no lado do cliente:


document.querySelector('form').onsubmit = evt => {

  // don't submit the form via the default HTTP redirect
  evt.preventDefault();
  
  // get the form values
  const formData = {
    name1: document.querySelector('input[name=name1]').value,
    name2: document.querySelector('input[name=name2]').value
  }
  console.log('formData:', formData);
  
  // send the form encoded in JSON to your server
  fetch('https://your-domain.com/path/to/api', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(formData),
  })
  
  // receive datos from the server
  .then(resp => resp.json())
  .then(datos => {/* do what you want here */})
  
  // catch potential errors
  .catch(err => console.log('an error happened: '+err));
  
}
<form>
  <input name="name1" value="value1">
  <input name="name2" value="value2">
  <button type="submit">Submit</button>
</form>

PS:O snippet acima falhará com um erro de rede porque apenas o script do lado do cliente está presente - não há nada em execução em https://your-domain.com/path/to/api , mas você já incluiu o código do servidor correto em sua pergunta. Apenas termine o script do servidor por res.send(datos) .