Form di Login con Ajax e Servlet

[Petermessy]

Buongiorno a tutti,premetto che ho cominciato veramente da poco ad utilizzare Ajax. Passo a descrivere quale è il mio problema: ho un form (banale e statico) dal quale invocavo una servlet e a cui passavo le valorizzazioni degli input fatte dall'utente. Adesso vorrei un pò spostarmi con le conoscenze ed applicare a tutto questo il framework Ajax. A tal proposito ho provato a fare qualcosa del genere:Pagina del form:

Form d'inserimento username e passwordForm Inserimento Username / Password    Inserisci il tuo username:             
Inserisci la tua password:     
Accedi comeUtenteAmministratore

E per completezza la Servlet è (in logica vecchio form):

package servlet;import dataAccessObject.*;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.GregorianCalendar;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import dbmUtility.*;import entity.*;/** * Servlet implementation class UserController */@WebServlet(urlPatterns = { "/UserController" })public class UserController extends HttpServlet {    private static final long serialVersionUID = 1L;        /**     * @see HttpServlet#HttpServlet()     */    public UserController() {        super();    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse     *      response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        // TODO Auto-generated method stub        response.getWriter().append("Served at: ").append(request.getContextPath());    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse     *      response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        HttpSession session = request.getSession(true);        try {            // Recupero i campi del form            String username = request.getParameter("username");            String password = request.getParameter("password");            int roletype = Integer.parseInt(request.getParameter("usertype"));            // Se sono stati compilati tutti i campi            if (username.equals("") || password.equals("")) {                // Reinderizzo alla pagina di mancata compilazione di tutti i                // campi                this.getServletContext().getRequestDispatcher("/loginErrorCampiVuoti.jsp").forward(request, response);                return;            }            // Pagina Amministratore            if (username.equals("admin") && (password.equals("admin")) && (roletype == 1)) {                session.setAttribute("admin", "admin");                this.getServletContext().getRequestDispatcher("/adminIndex.jsp").forward(request, response);                return;            }            if ((!username.equals("")) && (!password.equals(""))) {                UserDao dao= new UserDao();                //Mi faccio tornare il ruolo dell'Utente                int ruolo=dao.getUserRoleByUsernamePassword(username, password,roletype);                                if (ruolo==0) {                                        String id =dao.getUserIdByUsernamePassword(username, password);                    if(dao.getDeletedByUsernamePassword(username, password, ruolo)==1){                        this.getServletContext().getRequestDispatcher("/userDeletedNoAccess.jsp").forward(request, response);                        return;                    }                    else                    //Setto la sessione dell'Utente calcolando il suo orario di accesso                    session.setAttribute("utente", id);                    GregorianCalendar data=new GregorianCalendar();                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");                    String accesso =sdf.format( data.getTime());                    dao.setUltimoAccessoUser(id, accesso );                    this.getServletContext().getRequestDispatcher("/userIndex.jsp").forward(request, response);                    return;                }                if (ruolo==1) {                                         this.getServletContext().getRequestDispatcher("/adminIndex.jsp").forward(request, response);                    return;                }                else {                    this.getServletContext().getRequestDispatcher("/loginErrorNessunUtente.jsp").forward(request,                            response);                    return;                }            }        } catch (Exception e) {            e.printStackTrace();            this.getServletContext().getRequestDispatcher("/error.jsp").forward(request,                    response);            return;        }    }}

Quello che vorrei fare (in parte pensavo di averlo fatto con il codice inserito nella pagina d'inserimento) è: una volta che l'utente immette i dovuti campi e sceglie il ruolo (in precedenza tali credenziali, compreso il ruolo, sono state decise da un admin superiore) avere per intanto un messaggio di corretto/incorretto login. Dopo avere: nel primo caso un dispatcher alla pagina dell'utenza con messaggio di OK, nel secondo caso avere solo un messaggio di errore.Provando il codice postato la visualizzazione è ferma alla pagina d'inserimento (la prima). Prima, caso di form statico (senza ajax), ovviamente il tutto funzionava. So che la Servlet non dovrebbe più contenere i vari dispatcher alle pagine di messaggi di corretto/incorretto login, ma come posso fare? O dove sto sbagliando?Grazie a chi si interesserà!

[cavicchiandrea]

A) Non conosco jsp pertanto non saprei come o cosa modificare
B) Il codice (che sia js o jsp) deve essere leggibile
C) Non riscontro codice js/jquery
D) non postare codice lato server se non espressamente richiesto non tutti lo conoscono di contro confonde

[Petermessy]

A) Non conosco jsp pertanto non saprei come o cosa modificare
B) Il codice (che sia js o jsp) deve essere leggibile
C) Non riscontro codice js/jquery
D) non postare codice lato server se non espressamente richiesto non tutti lo conoscono di contro confonde

Non so cosa sia successo ma l'anteprima del messaggio era nettamente differente, addirittura mancano completamente delle parti di codice. Mah! Scusate! Provvedo a postare qui il codice della pagina d'inserimento.

 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE>
<html>
<head>


<!--/Importazione jQuery-->
<script type="text/javascript" src="js/jquery-2.2.2.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<!--/Importazione CSS-->
<link rel="stylesheet" href="Style.css" type= "text/css">


<title>Form d'inserimento username e password</title>
</head>
<body>
<div id="container">
<div id="header"><h2>Form Inserimento Username / Password </h2></div>


<div id="form">
<form id="form_ajax" method="post" action="UserController">


<div id="header">
    <label for="username">Inserisci il tuo username: </label>
    <input id="username" type="text"  name="username">
    
    <p><label for="password">Inserisci la tua password: </label>
    <input id="password" type="password"  name="password">
<div id="header">
<h3>Accedi come</h3>
<select id="roletype" name="roletype">
<option value="0">Utente</option>
<option value="1">Amministratore</option>
</select></div>
<input id="submit" type="submit" value="Login">
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#submit').click(function(){
    	$('#form').append('<img src="img/load.gif" alt="loading" id="loading" />');
    	var username= $('#username').val();
    	var password= $('#password').val();
    	var roletype= $('#roletype').val();
    	$.ajax({
    		url:  'UserController',
    		type: 'POST',
    		data: 'username=' + username + '&password=' + password + '&roletype=' +roletype,
    		success: function (risposta){
    			$('#form').append('<p id="risposta">'+ risposta +'</p>');
    			$('#loading').fadeOut(800,function(){
    				$(this).remove();
    			})
    		}
    	});
    	return false;
    });
});
</script>
</body>
</html>

Per il codice lato server cosa mi consiglieresti di fare? Postarlo in "Java"? Sarebbero un pò legate le cose.

[cavicchiandrea]

Non mi risulta che siano legate, la pagina jsp che elabora i dati deve restituire dei response.write o echo (equivale in jsp) cioè risposte/errori

Attenzione usa un tasto button al posto del submit

[Petermessy]

Ho risolto poi! Ho ascoltato il consiglio del button, grazie! Ma quello che mi creava veramente problemi era più banalmente il nome con cui richiamavo il form nella funzione javascript: (#form) che era sbagliato!

Ora avrei un altra domanda se era possibile: mi piacerebbe creare un oggetto json a partire sempre dai campi di questo form, ho ovviamente fatto qualcosa che posto

<%@page import=" org.json.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE>
<html>
<head>


<!--/Importazione jQuery-->
<script type="text/javascript" src="js/jquery-2.2.2.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<!--/Importazione CSS-->
<link rel="stylesheet" href="Style.css" type= "text/css">


<title>Form d'inserimento username e password</title>
</head>
<body>
<div id="container">
<div id="header"><h2>Form Inserimento Username / Password </h2></div>


<div id="form">
<form id="form_ajax" method="post" action="UserController">


<div id="header">
    <label for="username">Inserisci il tuo username: </label>
    <input id="username" type="text"  name="username">
    
    <p><label for="password">Inserisci la tua password: </label>
    <input id="password" type="password"  name="password">
<div id="header">
<h3>Accedi come</h3>
<select id="roletype" name="roletype">
<option value="0">Utente</option>
<option value="1">Amministratore</option>
</select></div>
<input id="submit" type="submit" value="Login">
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#submit').click(function(){
    	$('#form_ajax').append('<img src="img/load.gif" alt="loading" id="loading" />');
    	var username= $('#username').val();
    	var password= $('#password').val();
    	var roletype= $('#roletype').val();
    	var jsonObj = {
    		    "username": username,
    		    "password": password,
    		    "roletype": roletype,
    	};
    	var jsonString = JSON.stringify(jsonObj);
    	$.ajax({
    		url:  'UserController',
    		type: 'POST',
    		dataType:'JSON',
    		data: jsonString,     
    		contentType: 'application/json',
            mimeType: 'application/json',
    		success: function (risposta){
    			$('#risposta').remove();
    			$('#form').append('<p id="risposta">'+ risposta +'</p>');
    			$('#loading').fadeOut(800,function(){
    				$(this).remove();
    			})
    		}
    	});
    	return false;
    });
});
</script>
</body>
</html>

Quando cerco di recuperare il jason lato servlet con:

String oggetto = (String)request.getParameter("jsonString");

recupero un bel null purtroppo! Visto che in logica "query parameter" il tutto funzionava sto evidentemente sbagliando a utilizzare il json. Nello specifico cosa sbaglio?
Tra l'altro ho anche un "java.lang.NumberFormatException: null", immagino che si riferisce al roletype(int). Perchè?
Chiedo lumi please! Grazie come sempre!

[cavicchiandrea]

Vedi http://api.jquery.com/serializeArray/ fa quello che vuoi