Exécuter requête jquery dans une servlet
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:
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:
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:
response.setContentType("text/xml");
mais le browser m'affiche cette erreur :
Code:
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:
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.