Vérifier formulaire avec de l'AJAX

**sihamnet** · 19/02/2014, 01h59

Bonjour ,

je travaille sur une application web avec j2ee , et j'ai essayé de vérifier le formulaire avec AJAX , même si je connais rien dans l'AJAX.
Bon j'ai trouvé un bout du code sur internet et j'ai essayé de l'adapter avec une Servlet , mais ça ne marche pas .
le problème c'est que la redirection vers la page Home après une correcte authentification ne se fait pas ,je reste sur la page index avec les erreurs déclenchés par l'AJAX

j'ai besoin de vos conseils et merci d'avance

voilà le code de la page index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html lang="en-US">
 
<head>
	<meta charset="UTF-8">
	<title>s'Authentifier</title>
	<link rel="stylesheet" href="style.css" />
	<link href='style1.css' rel='stylesheet' type='text/css'> <!--  <a href="http://fonts.googleapis.com/css?family=Oleo+Script" target="_blank">http://fonts.googleapis.com/css?family=Oleo+Script</a> -->
	<script type="text/javascript" src="jquery-1.7.min.js"></script>
	<script type="text/javascript">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function(){
	$("#login").click(function(){
		var action = $("#lg-form").attr('action');
		var form_data = {
			username: $("#username").val(),
			password: $("#password").val(),
			is_ajax: 1
		};
		$.ajax({
			type: "GET",
			url: action,
			data: form_data,
			success: function(response){
				if(response == "success")
					$("#lg-form").slideUp('slow', function(){
						$("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
					});
				else
					$("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
			}	
		});
		return false;
	});
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
	</script>
 
</head>
<body>
	<div class="lg-container">
		<h1>Admin Area</h1>
		<form action="Authentification" id="lg-form" name="lg-form" method="get">
 
			<div>
				<label for="username">Username:</label>
				<input type="text" name="username" id="username" placeholder="username"/>
			</div>
 
			<div>
				<label for="password">Password:</label>
				<input type="password" name="password" id="password" placeholder="password" />
			</div>
 
			<div>				
				<button type="submit" id="login">Login</button>
			</div>
 
		</form>
		<div id="message"></div>
	</div>
</body>
</html>

et celui de la Servlet Authentification

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
package web;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
 
import javax.servlet.ServletException;
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 javax.swing.JOptionPane;
 
import dao.User_dao;
import metier.User;
 
 
 
/**
 * Servlet implementation class Authentification
 */
@WebServlet("/Authentification")
public class Authentification extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Authentification() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	/**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
 
 
        String is_ajax = request.getParameter("is_ajax");
    	if(is_ajax != null)
    	{
    		String username = request.getParameter("username");
			String password = request.getParameter("password");
 
			User usr ;
			try {
					usr = User_dao.getUserBy(username,password); 
					if (usr!=null) {//on vérifie dans la bdd si le user existe
 
						HttpSession session = request.getSession();
						session.setAttribute("user", usr);
		                request.getRequestDispatcher("Home.jsp").forward(request, response);	
		                System.out.println("succes");
					}
 
			} catch (SQLException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
			}
		}
	}
 
	/**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}
 
}

**Darkaurora** · 19/02/2014, 11h26

Tu n'as mit qu'un paramètre dans ta callback success, cependant si on suit la documentation ici, elle doit prendre trois arguments

1: La donnée retourné par ton serveur (même si je n'y connais rien en J2EE je ne pense pas que tu retournes quelque chose)
2: Un string te donnant le statut (je pense que c'est ça que tu souhaites récupérer)
3: L'objet XMLHttpRequest

Vu que tu déclares qu'un seul paramètre, JS l’interprète comme étant la data retournée par ton serveur et non le statut que tu souhaites récupérer.

Peut être qu'en essayant avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
	type: "GET",
	url: action,
	data: form_data,
	success: function(data, response, jqXHR){
		if(response == "success")
			$("#lg-form").slideUp('slow', function(){
				$("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
			});
		else
			$("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
	}	
});

voir même (en fonction de ta version de jQuery):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
	type: "GET",
	url: action,
	data: form_data
})
 
.done( function( data ) {
	$("#lg-form").slideUp('slow', function(){
		$("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
	});
} )
 
.fail( function( ) {
	$("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
} )

A essayer! Quand bien même je serais en train de dire n'importe quoi

un petit console.log( response ); dans ton success te permettrais de savoir:

1 si tu passes dedans
2 ce que vaut response

**sihamnet** · 19/02/2014, 13h24

merci Darkaurora pour votre réponse , mais le problème persiste encore

**Darkaurora** · 19/02/2014, 13h47

Pouvez vous mettre ce que retourne la methode success via console.log(response); avec le code de départ puis avec le code fournis ?

Le problème est que je ne peux pas tester par moi même a cause de votre communication vers un servlet.

Cependant une autre remarque susceptible d'être a l'origine de vos problèmes... La première action au click sur le bouton submit du formulaire va le soumettre directement au serveur. Je ne sais pas si votre événement click se déclenche donc...

Essayer de rajouter console.log( 'coucou' ) en première instruction de l'event click. (avant vos déclarations de variables 'action' et 'form_data')

Pour vérifier la console JS d'un navigateur => ici

Vérifier formulaire avec de l'AJAX

jQuery

Vue hybride

Discussions similaires

Partager

Partager