Skip to main content

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

estoyEstoy tratando de hacer un login sencillo usando servletsservlets, jqueryjquery y ajaxajax, pero no encuentro la forma que me funcione. Adjunto

Adjunto mi codigocó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 JSPJSP y se pudo. Pero ahora estoy intentado usar AjaxAjax, ya que planeo aprender mas cosas sobre como usarlo en un futuro. Muchas gracias. 

La base está en MySQLMySQL. Es solo una tabla sencilla, pero que servirá para más adelante. No sé que más poner porque me dice que hay pocá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;
    
      private String publicDriver BDLoginSistema()= {"com.mysql.cj.jdbc.Driver";
        private String URL = "jdbc:mysql://localhost:3306/proyajax?useSSL=false";
        private String Usuario = "root";
         private String Password try= {"mysql";
           
    private Connection Class.forName(Driver);Cn;
     private CallableStatement cstm;
    private ResultSet rs;

   Cn =public DriverManager.getConnectionBDLoginSistema(URL,Usuario,Password);
            } {
           try {
            catch Class.forName(ClassNotFoundException | SQLException eDriver) {;
                System.out.print("**********************ERRORCn "= +eDriverManager.getMessagegetConnection()URL,Usuario,Password);
            }
        }
        
        public booleancatch Login(StringClassNotFoundException usr,| StringSQLException pwde) {
            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());
            }
        } catch return(SQLException false;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();
            }
        }
        
    } 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(){
       <form $('#Enviar').click(function(){class="form-signin">
          <h2 varclass="form-signin-heading">Ingrese userpor =$('#inputUsuario').val();Favor</h2>
           var pwd =<div $('#inputPassword').val();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 {
     else {
                $("#errorLogin").html(data);
                }
            }
        }
    });
        });
    });
});

Como 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 codigo 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 pocá 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);
            }
        }
    });
        });
    });

¿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);
                }
            }
        });
    });
});
Origen Enlace

Como 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 codigo 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 pocá 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);
            }
        }
    });
        });
    });