sql >> Base de Datos >  >> NoSQL >> MongoDB

Envíe datos de NodeJS a la misma página html después del envío del formulario

No puede enviar datos a una página HTML. HTML es un formato de archivo estático y no puede recibir datos por sí mismo. Un servidor puede, pero no un archivo HTML.

Sin embargo, lo que puede hacer es interceptar su solicitud de publicación en el lado del cliente, enviarla al cliente usando XHR y recibir los datos en el lado del cliente nuevamente, luego haga lo que quiera cuando el script reciba datos . Básicamente, todo sucede entre la parte JavaScript de la página y el servidor Node que recibe los datos POST y los devuelve datos .

Aquí hay un ejemplo simple de cómo puede interceptar la solicitud POST en el lado del 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>

PD:el fragmento anterior fallará con un error de red porque solo está presente el script del lado del cliente; no hay nada ejecutándose en https://your-domain.com/path/to/api , pero ya incluyó el código de servidor correcto en su pregunta. Simplemente termine el script del servidor con res.send(datos) .