Skip to main content

¿Cómo hacer mi login con ajax, jsp y servlets?

Estoy tratando de hacer un login sencillo usando servlets, jquery y ajax, pero no encuentro la forma que me funcione.

Adjunto mi código para que me puedan ayudar, he intentando de varias formas pero nada aun.La conexión a la BD si se da, pude ingresar solo con código JSP y se pudo. Pero ahora estoy intentado usar Ajax, ya que planeo aprender mas cosas sobre como usarlo en un futuro. Muchas gracias.

La base está en MySQL. Es solo una tabla sencilla, pero que servirá para más adelante. No sé que más poner porque me dice que hay poca descripción así que uso este texto como relleno para ver si me deja publicar xd, no se debería tener esa restricción puesto que se puede explicar bien sin mucho texto, pero asumo que es la lógica de la web.

/*Clase con la conexión a BD y métodos*/
public class BDLoginSistema {
    
    private String Driver = "com.mysql.cj.jdbc.Driver";
    private String URL = "jdbc:mysql://localhost:3306/proyajax?useSSL=false";
    private String Usuario = "root";
    private String Password = "mysql";
    
    private Connection Cn;
    private CallableStatement cstm;
    private ResultSet rs;

    public BDLoginSistema() {
        try {
            Class.forName(Driver);
            Cn = DriverManager.getConnection(URL,Usuario,Password);
        } 
        
        catch (ClassNotFoundException | SQLException e) {
            System.out.print("**********************ERROR " +e.getMessage());
        }
    }
    
    public boolean Login(String usr, String pwd){
        String SQL = "CALL usp_login(?,?);";
        try {
            cstm = Cn.prepareCall(SQL);
            cstm.setString(1, usr);
            cstm.setString(2, pwd);
            rs = cstm.executeQuery();
            if(rs.next()){
                return true;
            }
        } catch (SQLException e) {
            System.out.print("************ERROR EN LOGIN" + e.getMessage());
        }
      return false;  
    }
    
}

/*Servlet Java*/
 @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    try { 
        NegocioLogin ObjNL = new NegocioLogin();
        String usuario = request.getParameter("usuario");
        String password = request.getParameter("password");
     
         boolean flagLogin = ObjNL.Login(usuario, password);
     
        if(flagLogin == true){
             response.setContentType("text/html; charset=iso-8859-1");
             out.write("menuIngreso");
        } else{
            response.setContentType("text/html; charset=iso-8859-1");
            out.write("Error");
        }
        
    } catch (Exception e) {
        e.printStackTrace();
    }
}

/*Index.jsp*/
<html>
    <head>
        <title>Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/validarLogin.js"></script>
    </head>
    <body>
        <div class="container">

            <form class="form-signin">
        <h2 class="form-signin-heading">Ingrese por Favor</h2>
        <div id="errorLogin">
           
        </div>
        <br>
        <label for="inputUsuario" class="sr-only">Usuario</label>
        <input type="text" id="inputUsuario" name="inputUsuario" class="form-control" placeholder="Usuario" required autofocus>
        <label for="inputPassword" class="sr-only">Contraseña</label>
        <input type="password" id="inputPassword" name="inputPassword" class="form-control" placeholder="Contraseña" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="Enviar">Ingresar</button>
      </form>

        </div>
    </body>
</html>

/*Archivo .JS con la función Ajax.*/
$(document).ready(function(){
    $('#Enviar').click(function(){
       var user =$('#inputUsuario').val();
       var pwd = $('#inputPassword').val();
       
        $.ajax({
            type: "POST",
            url: "servletLogin",
            data: {"usuario" : user, "password" : pwd},
            dataType: "json",
            success: function(data) {
                if (data == 'menuIngreso') {
                    var url = 'menuIngreso.html';
                    window.location.href = url;
                } else {
                    $("#errorLogin").html(data);
                }
            }
        });
    });
});