Appel AJAX avec jQuery et envoi de données JSON avec Struts

 Article modifié dernièrement le 3 Fév 2017 @ 21 h 58 min

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.

Javascript

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.

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).

Sources

Les sources complètes du projet monté sous Eclipse sont disponibles à cette adresse.

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Mimie 20 octobre 2010, 13 01

    Comme quoi il m’a bien aidé cet article, je me souvenais plus exactement comment procéder 🙂

  • nnnneess 30 octobre 2010, 19 07

    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

  • Greg 31 octobre 2010, 23 11

    nnnneess : Mimie doit être en week-end, je pense qu’il te répondra à son retour.

  • Mimie 1 novembre 2010, 9 09

    @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.

  • nnnneess 1 novembre 2010, 11 11

    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.

  • Mimie 1 novembre 2010, 16 04

    D’accord je comprends plus ce qu’il faut faire, je te fais ça ce soir et je te mettrai à disposition un .zip

  • Mimie 2 novembre 2010, 20 08

    Voilà, le zip contient un projet sous Eclipse, tout est dedans.
    J’espère que cela t’aidera : ConvertisseurJqueryJson.zip.

  • nnnneess 3 novembre 2010, 0 12

    @Mimie:Merciiiiiiiiiiiiiiiiiiiiiiiiii énomément

  • nos Eglises 11 mai 2011, 11 11

    merci pour votre aide 😉

  • Majid 4 juillet 2011, 5 05

    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

Article suivant:

Article précédent:

Share This