Ajax et servlet

**samuel4256** · 21/07/2010, 11h42

Bonjour

Voilà j'ai un formulaire de connexion avec un bouton qui m'envoie vers la servlet à l'aide d'une fonction Ajax.
Là il y a tout un bazar qui se fait très bien, enregistrement de paramètres en session etc...
Je voudrais également afficher un message dans la div où se trouve le formulaire indiquant que l'utilisateur est bien connecté. En PHP c'est simple il suffit de faire un include et la nouvelle page se met automatiquement dans la div.
En Java je n'y arrive pas, je suis redirigé vers une nouvelle page toute blanche contenant uniquement mon message.

J'ai essayé ça mais ca ne fonctionne pas:

RequestDispatcher disp = request.getRequestDispatcher("message.html") ;
disp.include(request, response) ;

getServletContext().getRequestDispatcher("message.html").include(request,response);

J'ai même essayé directement depuis ma servlet
out.println ("Connecte")
pour écrire directement dans ma div

En attendant votre aide, merci.

**imad_eddine** · 21/07/2010, 12h24

Bonjour,

Pourquoi ne penses tu pas à écrire ton message avec java script (puisque tu utilises Ajax) sur un div dans la même page au lieu d'inclure une autre page contenant ce message ?

**OButterlin** · 21/07/2010, 14h30

Si tu fais un appel AJAX, il faut traiter jusqu'au bout par AJAX.

Le dispatcher que tu utilises dans ta servlet renverra les données vers le client mais il faut les récupérer via httpRequest.responseText

**samuel4256** · 21/07/2010, 16h24

C'est ce que je fais mais au lieu de mettre la réponse dans la div comme je voudrais :

document.getElementById("formulaire").innerHTML = requeteAjax.responseText ;

il m'ouvre une nouvelle page.

**OButterlin** · 21/07/2010, 16h27

Peux-tu copier le source de cette nouvelle page et nous le montrer ?

**samuel4256** · 22/07/2010, 14h58

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Connecte.

Voilà c'est tout

**OButterlin** · 22/07/2010, 15h04

Ça ne devrait pas poser de problème...
Peux-tu montrer le code "ajax" lié à la demande et le code de la page source ?

**samuel4256** · 22/07/2010, 15h15

Alors ça c'est le menu de mon site, à l'interieur duquel se trouve le bouton de connexion

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
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
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>E-Commerce</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="Accueil.js"></script>
    </head>
    <body onLoad="envoiAjax('Liens.html',0)">
        <div id="logo-wrap">
            <div id="logo">
            <h1><a href="#">Mon site de e-Commerce</a></h1>
            <h2>par Samuel JAFFREC</h2>
            </div>
        </div>
 
        <!-- start header -->
 
        <div id="header">
            <div id="menu">
                <ul>
                    <li id="accueil"><a href="Accueil.jsp">Accueil</a></li>
                    <li id="liv" onClick="envoiAjax5('livres.jsp')" onMouseOver="curseurLivres(1)">Livres</li>
                    <li id="cd" onClick="envoiAjax5('cd.jsp')" onMouseOver="curseurCD(1)">CD's</li>
                    <li id="compte" onClick="envoiAjax5('Compte2.jsp')" onMouseOver="curseurCompte(1)">Mon compte</li>
                    <li id="panier" onClick="envoiAjax5('Panier2.jsp')" onMouseOver="curseurPanier(1)">Panier</li>
                    <li id="contact" class="" onClick="envoiAjax5('Contact.jsp')" onMouseOver="curseurContact(1)">Nous contacter</li>
                </ul>
            </div>
                 <form action="analyse3">
            <input type="submit" id="connexion" value="Deconnection">
            <input type="hidden" name = "page" value= "accueil">
        </form>
        </div>
 
        <!-- end header -->
        <!-- start page -->
 
        <div id="wrapper">
            <div id="wrapper-btm">
                <div id="page">
                    <div id="sidebar">
                        <ul>
                            <li id="search">
                                <h2>Search</h2>
                                <form method="get" action="">
                                    <fieldset>
                                         <input type="text" id="s" name="s" value="" />
                                        <input type="button" id="x" value="Search" onClick="recherche('Recherche.jsp')" />
                                    </fieldset>
                                </form>
                            </li>
                            <li>
                                <ul>
                                    <li id="lienInscription" onClick="envoiAjax('inscription.html',0)" onMouseOver="curseurInscription(1)">Inscription</li>
                                    <li id="lienConnection" onClick="envoiAjax('formulaire.html',0)" onMouseOver="curseurConnection(1)">Connection</li>
                                </ul>
                            </li>
                            <div id="formulaire"></div>
                        </ul>
                        <div id="autres">
                            <li id="connexionDirection" onMouseOver="curseurDirection(1)"onClick="envoiAjax('formulaireDirection.jsp',0)">Direction</li>
                            <li id="connexionMagasin" onMouseOver="curseurMagasin(1)"onClick="envoiAjax('formulaireMagasin.jsp',0)">Magasin</li>
                            <!--li id = "connexionAgenceur" onMouseOver="curseurAgenceur(1)"onClick="envoiAjax('formulaireAgenceur.jsp',0)">Agenceur</li-->
                        </div>
                    </div>

**samuel4256** · 22/07/2010, 15h20

Ca c'est le formulaire qui apparit quand on clique sur le bouton

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<link rel ="stylesheet" media ="screen" type ="text/css" title ="test" href ="formulaire.css" />
          <div id ="presentationLog">
               Veuillez vous logger<br><br>
               Nom : <input type = "text" id = "nom" value=""/> <br><br>
               Mdp  : <input type = "password" id = "mdp"  value=""/> <br><br>
                      <input type = "hidden"   id = "page"  value= "log" />
               <input type = "button" value = "Valider" onClick="envoiAjax('analyse3')">
          </div> <br><br>

Et enfin la fonction 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
function envoiAjax(url)
{
        var var1= document.getElementById('nom').value;
        var var2= document.getElementById('mdp').value;
        var var3= document.getElementById('page').value;
        var data = 'nom='+var1+'&mdp='+var2+'&page='+var3;
        url = url+"?"+data;
 
    requeteAjax.open("GET", url, true);
    requeteAjax.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
    requeteAjax.onreadystatechange = function()
    {
        if (requeteAjax.readyState == 4)
        {
            document.getElementById("formulaire").innerHTML = requeteAjax.responseText ;
        }
    }
 
    requeteAjax.send(null);
    alert(data) ;
}

Je voudrais qu'une fois le formulaire rempli, la servlet soit appelé et que mon message apparaisse dans la div où se trouvait le formulaire.