Exécuter requête jquery dans une servlet

**sal.gass** · 16/03/2010, 03h06

Salut pour tous,
Je suis en train de faire un exemple de requête ajax dans une application web java, en utilisant les servlets :

j'ai inséré la page html aussi le code javaScript dans la servlet :
code du mon servlet:

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
 
protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
 
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
 
		out.println("<!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=ISO-8859-1'>"
+ "<TITLE>Hello Client!</TITLE>"
 
+ "<script type='text/javascript' src='C://......Workspace/frameworkAjax/js/jquery-1.4.1.js'>"
						+ "$(document).ready(function() {"
						+ "$('#getWeatherReport').click(function(){"
						+ "$cityName = document.getElementById('cityName').value;"
+ "$.post('TestAjax', {cityName:$cityName}, function(data) {"
+ "$('#weatherReport').html('report');"
						+ "});"
						+ "});"
						+ "});"
						+ "</script>"
 
						+ "</HEAD><BODY>Hello Client!"
						+ "</BR>"
						+ "<form method='post'>"
						+ "Enter City :"
						+ "<input id='cityName' name='cityName' size='30' type='text' />"
						+ "<input id='getWeatherReport' name='getWeatherReport' type='submit' value='Get Weather' />"
						+ "</form>"
						+ "<div id='weatherReport' >  </div>"
						+ "</BODY></HTML>");
 
		out.close();
 
	}
 
 
protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
 
		String city = request.getParameter("cityName");
		String report = getWeather(city);
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("" + report + "");
		out.flush();
		out.close();
	}
 
	private String getWeather(String city) {
		return "valeur de Test";
	}

-La variable $cityName c'est pour passer un String en paramétre dans la méthode getWeather(String city), elle n'est pas utilisé juste pour un test;

-La valeur report c'est le data que je veux affiché dans le <div></div> après le formulaire l'id de mon div est 'weatherReport'.

Code :

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

1
2
+ "$.post('TestAjax', {cityName:$cityName}, function(data) {"
+ "$('#weatherReport').html('report');"

Avec ce code tous va bien et je récupère la mon valeur du servlet qui est "valeur de Test", mais le pb c'est que le résultat s'affiche dans une nouvelle page et non dans le div...c-à-d il y a rafraichissement de la page et il m'affiche "valeur de Test" tout seule sans le formulaire.

Dans l'exemple le type de réponse étais text/xml comme ça:

Code :

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

response.setContentType("text/xml");

mais le browser m'affiche cette erreur :

Code :

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

1
2
3
4
Erreur d'analyse XML : erreur de syntaxe
Emplacement : http://localhost:8080/frameworkAjax/TestAjax
Numéro de ligne 1, Colonne 1 :valeur de Test
^

j'ai changé avec :

Code :

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

response.setContentType("text/html");

pour éviter cette erreur.

Comment je peux corrigé mon code pour que le String s'affiche bien dans le contenue du <div> sans rafraichissement de la page ??

Je sais pas que cette erreur est liée à un problème Ajax ou Servlet J2EE.

Et merci d'avance.

**jowo** · 16/03/2010, 08h42

Bonjour,

C'est un peu laborieux. Votre page retourne l'information mais elle ne fonctionne pas comme vous le prévoyez.

D'abord, je ne générerai pas le code HTML par la servlet. Pour cela, une simple page HTML fera l'affaire et le code sera plus lisible.

Code HTML:

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
 
<!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=ISO-8859-1'>
    <TITLE>Hello Client!</TITLE>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
    <script type='text/javascript'>
       $(document).ready(function() {
         $('#getWeatherReport').click(function(){
           var cityName = document.getElementById('cityName').value;
           $.post("WeatherReportCity", {cityName:$cityName}, function(data) {
             $('#weatherReport').html(data);
           });
         });
       });
     </script>
   </HEAD>
   <BODY>Hello Client!
   <BR/>
   <!-- Le formulaire ne doit pas envoyer les données, l'information est
         envoyée via AJAX au servlet.
   -->
   <form method='post' action="#" onSubmit="return false;">
      Enter City : <input id='cityName' name='cityName' size='30' type='text' />
      <input id='getWeatherReport' name='getWeatherReport' type='submit' value='Get Weather' />
   </form>
   <div id='weatherReport' >  </div>
</BODY></HTML>

Le code n'a pas été testé et j'ai un doute comment appeler la servlet

La servlet ne s'occupera que de retourner les information météo de la ville saisie. Je te laisse le soin de coder la servlet!!

**OButterlin** · 16/03/2010, 08h45

Envoyé par sal.gass

Je sais pas que cette erreur est liée à un problème Ajax ou Servlet J2EE.

Ben non, change ton type de bouton de "submit" à "button".

Autre point, tu as un chemin physique "c:\...", ça ne fonctionnera jamais autre part que sur ton poste. On référence toujours un chemin en relatif dans une application web.

Une dernière chose, le code est illisible, la manière de structurer n'est pas bonne, même si pour débuter, je comprends l'approche...

Essaye de découper en t'inspirant du modèle MVC :

la vue -> JSP
le controleur -> Servlet
le modèle -> un bean (si besoin)

Tu gagneras en lisibilité et en maintenance...

Bonne continuation

**sal.gass** · 16/03/2010, 14h02

Merci jowo et OButterlin pour vos réponse,
J'ai fait comme vous avez dit j'ai séparé le code html et javascript du servlet;
mais l'action ne se passe pas au servlet...le déboggeur ne se pointe pas sur la méthode doPoste comme d'habitude;
voici mon code :
index.jsp:

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="C://...Workspace/frameworkAjax/js/jquery-1.4.1.js">
 
   $(document).ready(function() {
          $("#getWeatherReport").click(function(){
            $cityName = document.getElementById("cityName").value;
            $.post("TestAjax", {cityName:$cityName}, function(xml) {
           $("#weatherReport").html(
             $("report", xml).text()
         );         
        });
        });
    });
 
 
</script>
</head>
<body>
<form name="form1" type="get" method="post">
Enter City :
    <input type="text" name="cityName" id="cityName" size="30" />
    <input type="button" name="getWeatherReport" id="getWeatherReport"
    value="Get Weather" />
</form>
<div id="weatherReport" >
</div>
</body>
</html>

la servlet :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
 
		String city = request.getParameter("cityName");
		String report = getWeather(city);
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		out.println("" + report + "");
		out.flush();
		out.close();
	}

la méthode doGet est vide.
Pour les remarques de OButterlin:
Est ce que c'est nécessaire de déclarer un bean ?? si oui comment ??
Le pb maintenant est comment faire passer la requête au servlelt, comme à dit jowo.

**jowo** · 16/03/2010, 14h08

As-tu défini ta servlet dans le fichier web.xml?

En plus "sémantiquement" ton post n'est pas correct. Tu ne "postes (post)" rien vers le server. Tu "prends (get)" de l'information.

Avec un get, il est plus facile de tester le programme:

http://localhost:8080/TestAjax?cityName=Paris

**sal.gass** · 16/03/2010, 14h11

Envoyé par jowo

As-tu défini ta servlet dans le fichier web.xml?

oui bien sure:
mon web.xml :

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
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>frameworkAjax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>TestAjax</display-name>
    <servlet-name>TestAjax</servlet-name>
    <servlet-class>TestAjax</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>TestAjax</servlet-name>
    <url-pattern>/TestAjax</url-pattern>
  </servlet-mapping>
</web-app>

**sal.gass** · 16/03/2010, 14h37

Avec un get il faut appeler le nom de la servlet dans l'url :http://localhost:8080/frameworkAjax/TestAjax, puisque la méthode doGet est vide rien n'est affiché dans le browser...donc je ne peut pas tester,
il faut passer par la page index.jsp puis il faut appeler la méthode doPost (je pense )

Exécuter requête jquery dans une servlet

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager