0

tengo un formulario hecho con html,css y javascript puro, del lado del servidor estoy usando node.js puro (sin frameworks) y el problema que tengo es que cuándo envío los datos del formulario y obtengo la respuesta del servidor, esta respuesta se muestra automáticamente en la vista del navegador y sustituye la vista anterior. intenté enviar solo un json, ya que solo quiero por los momentos es recibir una respuesta si el usuario ingresado esta correcto para luego mostrar un aviso en la pagina (vista) actual pero esto no sucede, inmediatamente que hago el res.end en el servidor, este me sustituye la vista del navegador por la respuesta que envío (en este caso el Json). como podría hacer? estoy usando Ajax para la petición al cliente y tampoco me funciona, que estoy haciendo mal? dejo los codigos de lo que tengo:

formulario (archivo html):

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Formulario de ingreso">
        <meta name="keywords" content="formulario, ingreso, logueo" >  
        <title> Formulario de Ingreso </title> 
        <link rel="stylesheet" href="formulario.css">
        <script src="formulario.js"> </script>
        <script src="peticion.js">  </script>
    </head>
    <body>
        <div id="cont-principal">
            <img src="inicioSesion.jpg" id="img-fondo" alt="">
            <div id="cont-formulario">
                <div id="cont-logo">
                    <img src="logo.png" alt="" style="width: 100%; height: 100%;">
                </div>
                <form name="formulario" id="formulario" action="http://localhost:3000/inde.html" method="POST">
                    <div id="cont-camposFormulario">
                        <label for="usuario"><span class="fuente-label">Usuario</span></label>
                        
                        <div class="cont-input">
                            <input type="text" name="usuario"  id="input-usuario" placeholder="Ingresa tu usuario" required><div id="mensaje-error"> Ingresa tu usario </div>
                            <img src="usuario.png" alt="">
                        </div>
                        <label for="contraseña"><span class="fuente-label">Clave</span></label>
                        <div class="cont-input">
                            <input type="password" name="contraseña" id="input-clave" placeholder="Ingresa tu clave" required><div id="mensaje-error"> Ingresa tu clave </div>
                            <img src="password.png" alt="">
                        </div>
                    </div>
                </form>

                <div id="cont-recuperacion">
                    <div class="cont-links-recuperacion">
                        <a href="" > ¿Olvidaste tu clave?</a>
                    </div>
                    <div class="cont-links-recuperacion">
                        <a href="" > Desbloquear usuario</a>
                    </div>
                </div>

                <input type="submit" value="Ingresar" id="boton-ingresar" onclick="enviarPost();" form="formulario">
                <div id="enlace-registrarse">
                    <a href="">Regístrate</a>
                </div>
                
            </div>
        </div>


    </body>

</html> 

archivo ajax:

    console.log('peticionnnnnnnnnnnnn')
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let variable =   this.responseText;
            document.getElementById("cont-principal").innerHTML =
      this.responseText;
        }
    };
    xhttp.open("GET", "http://localhost:3000/index.html", true);
    xhttp.send();

    function enviarPost(){
        console.log('postttttttttttttttttttt')
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let variable =   this.responseText;
        //         document.getElementById("cont-principal").innerHTML =
        //   this.responseText;
            }
        };
        xhttp.open("POST", "http://localhost:3000/", true);
        xhttp.send();
    }

servidor (aquí respondo a las peticiones), comente unas cosas que tenía y solo deje el retorno del json:

// importamos los módulos necesarios
const http = require('http');
const mime = require('mime');
const path = require('path');
const fs = require('fs');
const querystring = require('querystring');
const conectar = require('./conexionBd');
const retornarVista = require('./rutas')
// establecemos el puerto de escucha de nuestro servidor
const port = 3000;

conectar.conectarBd();

// creamos la función que manejará las solicitudes
function webServer(req, res) {
  if(req.method === 'GET'){
    const fileRequested = path.join(__dirname, 'publico', req.url);
    fs.readFile(fileRequested, (err, data) => {
      if(err) {
        res.writeHead(404);
        res.end(JSON.stringify(err));
        //return;
      }
      const mimeType = mime.getType(fileRequested);
      //console.log("--->"+mimeType);
      const headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
        'Access-Control-Max-Age': 2592000, // 30 days
        /** add other headers as per requirement */
      };
      // const headers = {
      //   'content-type': 'application/json'
      // };
      res.writeHead(200, headers);
      let objeto = {ok: true, message: 'credenciales correctas'}
      res.write(data)
      res.end();
    });
  }
  if(req.method === 'POST') {
    let dataString = '';
    //console.log("EMTRO AL POST");
    req
      .on('data', data => {
        dataString += data;
      })
      .on('end', () => {
        const datosFormulario = querystring.parse(dataString);
        // //console.log('Nombre ->'+datosFormulario.usuario);
        var prueba;
        // conectar.consultarUsuarioContrasena(datosFormulario.usuario,datosFormulario.contraseña, function(existe){
        //   prueba=existe;
        //   (existe) ? (console.log('Existe El Usuario'), retornarVista.solicitarVista('vistaIngresado.html', function(error,encabezado,datos){
        //     if(error){
        //       res.writeHead(404);
        //       res.end(JSON.stringify(err));
        //     }else{
        //       res.writeHead(200,encabezado);
        //       let objeto = {ok: true, message: 'credenciales correctas'}
        //       res.end(JSON.stringify(objeto));
        //     }
        //   })
        //   ) : console.log('No existe el Usuario');
          const headers = {
            'content-type': 'application/json'
          };
                   res.writeHead(200,headers);
         let objeto = {ok: true, message: 'credenciales correctas'}
         res.end(JSON.stringify(objeto));
          const templateString = `los datos que enviaste por POST como string son: ${dataString}`
          // console.log(templateString);
          // const headers = {
          //   'content-type': 'text/plain'
          // };
          // res.writeHead(201, headers);
          // res.write('holaaaaaaaaaaaaaa');
          // res.end(prueba.toString());
      
 
      });
  }
}

// instanciamos el servidor
const server = http.createServer(webServer);

// levantamos el servidor en el puerto establecido
server.listen(port, () => {
  console.log(`Servidor escuchando en el puerto: ${port}`);
});

Aqui dejo algunas capturas de lo que sucede:

este es mi formulario (hasta aquí todo bien):

formulario

cuando envío el formulario, esto es lo que pasa, se quita la vista actual (el formulario) y se sustituye con la respuesta del servidor así:

respuesta de servidor

lo que quiero es simplemente usar los datos de la respuesta y mantener la misma vista, para poder mostrar un mensaje en esa vista en base a los datos de la respuesta. como podria hacerlo? tengo horas en esto y ya no me da la cabeza, no se que estoy haciendo mal. gracias de antemano al que me pueda ayudar con esto.

9
  • El formulario se está procesando normalmente, agrega return false; al final del onclick.
    – Triby
    Commented el 18 dic. 2019 a las 5:11
  • no entiendo. así: onclick="enviarPost(); return false;" ?
    – JulianProg
    Commented el 18 dic. 2019 a las 5:15
  • Por lo que veo sí entendiste. La explicación es que el botón submit enviará el formulario como una petición normal, independientemente de lo que hagas con el onclick. "return false;" evita que se envíe esa petición normal, ejecutando solo la función enviarPost()
    – Triby
    Commented el 18 dic. 2019 a las 5:22
  • coloque la línea tal cuál como la escribí en mi comentario anterior pero no veo ninguna diferencia.
    – JulianProg
    Commented el 18 dic. 2019 a las 5:23
  • La página se queda igual o sigue mostrando el JSON? Qué ves en la consola?
    – Triby
    Commented el 18 dic. 2019 a las 5:28

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.