Ajax et servlet

Version imprimable

21/07/2010, 11h42
samuel4256

Ajax et servlet

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.
21/07/2010, 12h24
imad_eddine

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 ?
21/07/2010, 14h30
OButterlin

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
21/07/2010, 16h24
samuel4256

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.
21/07/2010, 16h27
OButterlin

Peux-tu copier le source de cette nouvelle page et nous le montrer ?
22/07/2010, 14h58
samuel4256


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

Connecte.

Voilà c'est tout
22/07/2010, 15h04
OButterlin

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

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

Code:

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>

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

Code:

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:

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.

22/07/2010, 15h54
OButterlin

C'est la ligne

Citation:

requeteAjax.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");

qui pose problème, retire la...