[AJAX] Utilisation d'ajax avec les servlets

Bonjour à tous ;
j'ai un petit problème concernant l'utilisation d'ajax avec les servlet, en effet je veux liées deux liste déroulante, une se charge automatiquement de la base de données, et la deuxiéme, suite à un "onchange()" event de ma premiére liste, elle doit etre remplis automatiquement aussi de la base de données.
je n'arrive pas a le faire, sachant que j'arrive a afficher un text simple avec ajax et une servlet.
Merci d'avance.

Bonjour,

Tu peux nous montrer ton code qui ne fonctionne pas?

A+.

Citation:

Envoyé par andry.aime

Bonjour,

Tu peux nous montrer ton code qui ne fonctionne pas?

A+.

Bien sure,
ça c'est ma page JSP :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.01 Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Gestion des matériels</title>
    <link rel="stylesheet" href="stylesheets/default.css">
    <script type="text/javascript" src="javascripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="javascripts/fonction.js"></script>
    <script type="text/javascript" src="javascripts/behavior.js"></script>
	<script type="text/javascript" src="javascripts/picnet.table.filter.min.js"></script>
	<script src="javascripts/fonction.js"></script>
 
    <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%@page import="java.sql.*"%>
	<style type="text/css">
.main {
width:150px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: #c0c0c0;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="javascripts/basiccalendar.js"></script> 
 
<%if (session.getAttribute("nom")==null)
	{
	RequestDispatcher rd = getServletContext().getRequestDispatcher("/login.jsp"); 
	rd.forward(request, response);
	}
	%>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {                                  
$('#soc').change(function() {                        
  $.get('Remplist', function(responseText) {    
    $('#ser').text(responseText);                          
  });
});
});
</script>
<%@page import="javax.servlet.RequestDispatcher"%>
<%@page import="javax.servlet.http.HttpSession"%>
<%@page import="java.sql.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%
Connection Con = null;
		try
		{
			Class.forName("com.mysql.jdbc.Driver");
		}
			catch (ClassNotFoundException e)
		{
			System.out.println("Impossible de charger le pilote jdbc " +e);
		}
		//connection a la base de données
		System.out.println("Connection a la base de données");
		try
		{		
			Con = DriverManager.getConnection("jdbc:mysql://localhost:3307/bdreclam","root","1234");
		} 
		catch (Exception e) 
		{
			System.out.println("Connection à la base de données impossible "+ e);
		}
%>
<script>
$(document).ready(function() {
	$('#listpos').tableFilter();
});
</script>
<body onload="confirm();">
	<header id="mast">
    	<center><h1><font color="#200060">Gestion Des Réclamations</font></h1></center>
    	<center><h3>Bienvenue <font color="#200080"><b><i><%out.print(session.getAttribute("nom")); %> <%out.print(session.getAttribute("prenom")); %></i></b></font> du service <font color="#200080"><b><i><%out.print(session.getAttribute("service")); %></i></b></font> dont ton poste est : <font color="#200080"><b><i><%out.print(session.getAttribute("poste")); %></i></b></font></h3></center>
    	<center><h4>On est le : <font color="#202080"><b><i><script>var d= new Date(); document.write(d.toLocaleDateString());</script></i></b></font></h4></center>
    </header>
    <nav id="global">
    	<ul>
        	<li><a class="selected" href="AcceuilAdmin.jsp">Home</a></li>
			<li><a href="HisAdmin.jsp">Historique</a></li>
			<li><a href="SuiviAdmin.jsp">Suivi des réclamations</a></li>
			<li><a href="Param.jsp">Paramétrage</a></li>
			<li><a href="ModifierProfil.jsp">Profil</a></li>
            <li><a href="Deconnecter">Déconnexion</a></li>
        </ul>
    </nav>
    <section id="intro">
    	<header>
 
        </header>
        <div id="slideShowImages">
    		<img src="photos/scpc.jpg" alt="Slide 1" width="400" height="150"/>
    		<img src="photos/carrelage.jpg" alt="Slide 2" width="400" height="150"/>
   		 	<img src="photos/sips.jpg" alt="Slide 3" width="400" height="150"/>    
    		<img src="photos/sit.jpg" alt="Slide 4" width="400" height="150"/>
    		<img src="photos/sodimac.jpg" alt="Slide 5" width="400" height="150"/>
    		<img src="photos/sofap.jpg" alt="Slide 6" width="400" height="150"/>
    		<img src="photos/stmt.jpg" alt="Slide 7" width="400" height="150"/>
		</div> 
 
  		<script src="javascripts/slideShow.js"></script>
		<div id="photo">
        	<div>
            	<IMG src="photos/groupe-hammami.jpg" width=380 height=260>
            </div>
        </div>
    </section>
    <div id="main" class="clear">
        <section id="articles">
            <article class="blogPost">
 
                <header>
                    <h2>Gestion des Services :</h2>
                    <h4>Ajouter une poste :</h4>
                </header>
                <div style="width:500px; height:300px; overflow:auto;">
                <table id="listpos">
                <thead>
                	<tr>
                		<th>Poste</th>
                		<th filter-type='ddl'>Service</th>
                		<th filter-type='ddl'>Société</th>
                	</tr>
                </thead>
                <tbody>
                <%
                	String req="select * from poste;";
                	 try
 					{
 					Statement stmt = Con.createStatement();
 					ResultSet resultat = stmt.executeQuery(req);
 					while (resultat.next())
 					{
 						out.print("<tr align='center'><td>"+resultat.getString("poste")+"</td><td>"+resultat.getString("NomSer")+"</td><td>"+resultat.getString("NomSoc")+"</td></tr>");
 					}
 					}
 					catch (SQLException e) {
 					e.printStackTrace();
 					}
                %>
                </tbody>
                </table>
 
                </div>
                <h3><img src="photos/ajouter.png">Ajouter une poste : </h3>
                <form name="ajouterPos" method="Post" action="AjoutPos">
                	<table>
                		<tr>
                			<td>Sélectionne une société pour lui affecté un nouveau service : </td>
                			<td><select name="soc" id="soc"><%String requete1 = "Select * from societe";
    						try
    						{
    							Statement stmt = Con.createStatement();
    							ResultSet resultat1 = stmt.executeQuery(requete1);
    							while (resultat1.next())
    							{
    								out.print("<option>"+resultat1.getString("NomSoc"));
    							}
 
    						}
    						catch (Exception e) {
    							e.printStackTrace();
    						}  %></select></td>
                		<tr>
                		<tr>
 
                			<td>Sélectionne une société pour lui affecté un nouveau service : </td>
                			<td><div id="ser"></div></td>
 
                		</tr>
                		<tr>
                			<td>Saisir le nom du nouvelle poste : </td>
                			<td><input type="text" name="nom"></td>
                		<tr>
                		<tr>
                			<td colspan="2"><center><input type="submit" name="ajout" value="Ajouter" class="myButton"><input type="button" name="re" value="Retour" onclick="window.location='GestSer.jsp'" class="myButton"></center></td>
                		<tr>
                	</table>
                </form>
 
                </div>
            </article>
        </section>
 
    </div>
    <footer>
    	<div class="clear">
            <section id="about">
                <header>
                    <h3>Groupe Hammami</h3>
					<p>Groupe Hammami, est un acteur national et international dans le domaine du bâtiment, son savoir-faire est reconnu à toutes les étapes des projets. Spécialiste en matériaux de construction pour les professionnels et les particuliers, propose les produits de qualité et de marque en gros-oeuvres.
Groupe Hammami place les enjeux sociaux et environnementaux au cœur de sa stratégie de développement pour objectif d’être leader en matière de construction durable.</p>
                </header>
            </section>
            <section>
                <header>
                    <h3>Contact</h3>
                </header>
                <ul>
					<li>ADRESSE : Route Sidi Monsour KM 1.5 BP 138 3000 Sfax – Tunisie</li>
					<li>Tél : +216 74 286 780</li>
					<li>Fax : +216 74 286 790</li>
					<li>Email : contact@groupe-hammami.com</li>
				</ul> 
            </section>
            <section>
                <header>
                    <h3>Site Du Groupe</h3>
                </header>
                <nav id="siteMap">
                    <ul>
                        <li><a href="http://www.hammami-groupe.com/">Groupe Hammami</a></li>
                    </ul>
                </nav>
            </section>
        </div>
    </footer>
</body>
</html>

c'est ma servlet :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
 
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 com.google.gson.Gson;
 
/**
 * Servlet implementation class Remplist
 */
@WebServlet("/Remplist")
public class Remplist extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
	{
		PrintWriter out = response.getWriter();
		Connection Con = null;
		try
		{
			Class.forName("com.mysql.jdbc.Driver");
		}
			catch (ClassNotFoundException e)
		{
			System.out.println("Impossible de charger le pilote jdbc " +e);
		}
 
		//connection a la base de données
		System.out.println("Connection a la base de données");
		try
		{		
 
			Con = DriverManager.getConnection("jdbc:mysql://localhost:3307/bdreclam","root","1234");
		} 
		catch (SQLException e) 
		{
			System.out.println("Connection à la base de données impossible "+ e);
 
		}
		String selectedValue = request.getParameter("soc");
		out.print(selectedValue);
		String req="select * from service where NomSoc= '"+selectedValue+"';";
		String ch="";
		ch="<select name='rub'>";
		try
		{
			Statement stmt = Con.createStatement();
			ResultSet resultat1 = stmt.executeQuery(req);
			while (resultat1.next())
			{
				ch=ch+"<option>"+resultat1.getString("NomSer")+"</option>";
			}
			ch=ch+"</select>";
 
		}
		catch (Exception e) {
			e.printStackTrace();
		}
		response.setContentType("html");
 
        // Set response body content. response body is returned as Ajax Response Text
        PrintWriter writer = response.getWriter();
        writer.write("Hello World!!");    // "Hello World!!" is returned as Ajax Response Text in this example
        out.print("<input type='text'>");
        writer.close();
	}
 
 
}

Peux tu mettre ta fonction js qui fait l'appel AJAX? car je ne vois pas d'appel AJAX dans ton code...:? 8O

voulà c'est mon code ajax

Code:

1
2
3
4
5
6
7
$(document).ready(function() {                                  
$('#soc').change(function() {                        
  $.get('Remplist', function(responseText) {    
    $('#ser').text(responseText);                          
  });
});
});

As tu essayé

Code:

$('#ser').html(responseText);

??

++

non, est ce que ça marche?

oui c'est bien marché ça, mais comment je peux passer la valeur de ma 1ére liste vers mon servlet?

Quelques chose comme çà...

Code:

1
2
3
4
 
    $.get('Remplist',{param1: "valueParam1"}, function(responseText) {    
    $('#ser').text(responseText);                          
  });

++

je pense que ça fonctionne au niveau jsp; mais comment la récupérer dans ma servlet

ba comme un paramétre envoyé en requete GET

Code:

request.getParameter("param1");

oui j'ai essayer celle ci, mais elle retourne toujours la valeur "null"

Montre nous la récupération du paramètre avec son envoie

++

c'est comment je passe la valeur en paramétre

Code:

1
2
3
4
5
6
7
8
9
<script>
$(document).ready(function() {                                  
$('#soc').change(function() {                        
  $.get('Remplist?id='+document.getElementById("soc").value, function(responseText) {    
    $('#ser').html(responseText);                          
  });
});
});
</script>

et ça pour la récupération mais toujours null

Code:

String selectedValue = request.getParameter("soc");

plutôt comme ça (comme dans mon précédent post!)

Code:

1
2
3
4
5
6
7
8
 
 
var valParam = document.getElementById("soc").value;
$('#soc').change(function() {                        
  $.get("Remplist",{"id":valParam}, function(responseText) {    
    $('#ser').html(responseText);                          
  });
});

et comment je peux la récupérer dans ma servlett??

comme ça?

val = request.getParameter("id");

c'est marché :D merci c'est trés gentil de ta part