Mon précédent article Struts : Comment renvoyer des données JSON en AJAX expliquait une façon de récupérer des données au format JSON depuis une action Struts, l’appel étant fait en AJAX par le biais de la bibliothèque Prototype.
Voici à présent une façon de procéder lorsque l’appel AJAX est fait par le biais de la bibliothèque jQuery, l’exemple mis en place ci-dessous permet de récupérer les informations d’une personne selon son identifiant au moyen de deux boutons.
© http://www.jarodxxx.com
Votre page Web
Nous passons en paramètre de la requête AJAX l’identifiant de la personne dont nous voulons afficher les informations grâce à {« code » : code}.
Une fois le traitement effectué côté Struts (détaillé un peu plus bas), la méthode callback « function(jsonString) {} » est appelée afin de récupérer la valeur envoyée par Struts.
L’objet reçu étant un tableau ayant le format [{key:val, key2:val2}] (au lieu de {key:val, key2:val2} ?), il faut récupérer le premier élément de celui-ci pour récupérer l’objet json tant attendu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="<%= request.getContextPath() %>/scripts/jquery.min.js"></script>
<script type="text/javascript">
var getPerson = function(code) {
$.getJSON("./person.do",
{"code" : code},
function(jsonString) {
var person = jsonString[0];
alert("code : " + person.code + ", name : " + person.name + ", ville : " + person.adresse.ville);
}
);
};
</script>
</head>
<body>
<input type="button" value="Infos personne A" onclick="getPerson('A');"/>
<input type="button" value="Infos personne B" onclick="getPerson('B');"/>
</body>
Votre action Struts
Je ne détaillerai pas la partie configuration du struts-config.xml qui est toute simple, néanmoins vous pouvez la voir en téléchargeant les sources de l’exemple en fin d’article.
Pour le reste c’est tout simple aussi, on récupère l’identifiant de la personne à récupérer (paramètre « code »), on récupère ses informations, on crée un objet JSON et on l’envoie pour jQuery le récupère comme expliqué ci-dessus (à noter qu’il faut impérativement les jar ezmorph et json-lib).
public class PersonAction extends Action {
// Récupère les informations de l'utilisateur passé en paramètre
public ActionForward execute(ActionMapping mapping, ActionForm actionForm, HttpServletRequest request, HttpServletResponse response)
throws Exception {
String personCode = request.getParameter("code");
Map<String, Object> jsonData = new LinkedHashMap<String, Object>();
// récupération des informations selon la personne
if ("A".equals(personCode)) {
jsonData.put("code", personCode);
jsonData.put("name", "NameA");
Map<String, Object> adresse = new HashMap<String, Object>();
adresse.put("ville", "Paris");
adresse.put("numero", 123);
jsonData.put("adresse", adresse);
} else if ("B".equals(personCode)) {
jsonData.put("code", personCode);
jsonData.put("name", "NameB");
Map<String, Object> adresse = new HashMap<String, Object>();
adresse.put("ville", "St Etienne");
adresse.put("numero", 50);
jsonData.put("adresse", adresse);
}
// création de l'objet Json depuis la Map jsonData qui contient les données à renvoyer
JSONArray jsonArray = JSONArray.fromObject(jsonData);
response.setContentType("application/json;charset=UTF-8");
response.getOutputStream().write(jsonArray.toString().getBytes());
response.getOutputStream().flush();
return null;
}
}
Sources
Les sources complètes du projet monté sous Eclipse sont disponibles à cette adresse.
Cet article a été écrit par :
Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.
Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !
Jetez aussi un oeil sur :
- Rotation d’une bannière publicitaire au contenu dynamique en AJAX
- Struts : comment renvoyer des données JSON en AJAX
- Soumission d’un formulaire au format JSON avec jQuery
- jQuery : Génération d’un formulaire jetable pour l’appel d’une action Struts
- jQuery : Auto-complétion avec mise en cache amélioré côté navigateur
Affichez votre portrait
{ 10 commentaires… à vous de vous exprimer ! }
Comme quoi il m’a bien aidé cet article, je me souvenais plus exactement comment procéder
S’il vous plait de m’aider :je suis débutante en jquery et ajax
j’ai un code en ajax de conversion d’un décimal en octal, binaire et hexadecimal
j’ai pas pu connaitre comment je doit modifier en incluant la technique json avec jquery
S’il vous plait de m’aider pour me diriger .
merci d’avance
nnnneess : Mimie doit être en week-end, je pense qu’il te répondra à son retour.
@nnnneess : Euh .. quel est le problème ? tu utilises du Java côté serveur ? tu nous dis pas où se situe ton problème donc difficile de répondre.
voici mes trois pages:
*index.html
?xml version= »1.0″ encoding= »ISO-8859-15″?>
Ajax et Java : exemple 1, XMLHttpRequest
D�codeur de caract�res AJAX
Tapez une touche pour obtenir son code d�cimal :
Tapez une touche ici:
D�cimal
Hexad�cimal
Octal
HyperText
Binaire
*voici la page .js
var req;
function convertToJSON(){
var key = document.getElementById(« key » );
var url = « /ConvertisseurJSON/response?key= » + escape(key.value);
req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open( « Get », url, true );
req.send( null );
}
function callback() {
if( req.readyState == 4 ) {
if( req.status == 200 )
{
populate();
}
}
clear();
}
function clear() {
var key = document.getElementById( « key » );
key.value = « »;
}
function focusIn() {
var err = document.getElementById( « erreurs » );
document.getElementById(« key »).focus();
}
function populate() {
var jasonData = eval(‘(‘+req.responseText+’)');
console.log(req.responseText);
decimal =document.getElementById(« decimal »);
decimal.value = jasonData.conversion.decimal;
var Hexadecimal = document.getElementById(« Hexadecimal ») ;
Hexadecimal.value =jasonData.conversion.Hexadecimal;
var octal= document.getElementById(« octal ») ;
octal.value = jasonData.conversion.octal;
var hyper = document.getElementById(« hyper ») ;
hyper.value = jasonData.conversion.hyper;
var binary = document.getElementById(« binary ») ;
binary.value = jasonData.conversion.binary;
}
*voici la page .java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ConvertisseurJSON extends HttpServlet {
private static final long serialVersionUID = 1;
public void doGet( HttpServletRequest req, HttpServletResponse res )
throws ServletException, IOException
{
String key = req.getParameter(« key »);
if( key != null ) {
int keyInt = key . charAt (0) ;
StringBuilder returnJSON = new StringBuilder (« \n{\ »conversion\ »:{« );
returnJSON.append (« \n\ »decimal\ »:\ »") ;
returnJSON.append (Integer.toString (keyInt));
returnJSON.append (« \ »,\n » ) ;
returnJSON.append ( « \n\ »Hexadecimal\ »:\ »" ) ;
returnJSON.append ( Integer.toString (keyInt,16));
returnJSON.append (« \ »,\n » ) ;
returnJSON.append ( « \n\ »octal\ »:\ »0″ ) ;
returnJSON.append ( Integer.toString (keyInt,8));
returnJSON.append (« \ »,\n » ) ;
returnJSON.append ( « \n\ »hyper\ »:\ »#0x » ) ;
returnJSON.append ( Integer. toString (keyInt,16));
returnJSON.append (« \ »,\n » ) ;
returnJSON.append ( « \n\ »binary\ »:\ »" ) ;
returnJSON.append ( Integer.toString(keyInt,2));
returnJSON.append (« B\ »,\n » ) ;
returnJSON.append (« }}\n »);
res.setContentType (« text/xml ») ;
res.setHeader( « Cache−Control », »no−cache ») ;
res.getWriter().write (returnJSON.toString()) ;
} else {
res.setContentType(« text/xml »);
res.setHeader(« Cache-Control », « no-cache »);
res.getWriter().write(« ? »);
}
}
}
–>je voudrai ,s’il vous plait, de faire des modifications en utilisant la bibliotheque Jquery avec Json
quelles sont les changements effectués et est ce que c’est possible de m’envoyer des liens sur ce thème pour m’aider
merciiiiiiiiiiii énormément.
D’accord je comprends plus ce qu’il faut faire, je te fais ça ce soir et je te mettrai à disposition un .zip
Voilà, le zip contient un projet sous Eclipse, tout est dedans.
J’espère que cela t’aidera : ConvertisseurJqueryJson.zip.
@Mimie:Merciiiiiiiiiiiiiiiiiiiiiiiiii énomément
merci pour votre aide
Thank you for this articles it’s a really good one.
But the source code that you put is not for this example.
Thanks again
Majid