Récupération et affichage de données AJAX

**Jennifer90** · 16/06/2013, 11h39

Bonjour, je suis nouvelle avec Ext Js et je vais insérer les données récupérées de ma servelet dans une grid ext js à travers une requête ajax mais j'ai toujours une page blanche affichant seulement le message "Ajax Demo":
Mon code ajax.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
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
<html>
<head>
<script type="text/javascript">
Ext.onReady(function(){
    var myData=null;
    Ext.Ajax.request({
        url: 'AccessServlet',
        method:'POST',
        success: function ( result, request ) { 
        store.loadData(myData);
        myData =Ext.decode(result.responseText);
 
 
        },
        failure: function ( result, request) { 
                Ext.MessageBox.alert('Failed', result.responseText); 
        } 
    });
     var store = new Ext.data.ArrayStore({
            fields: [
               {name: 'name'},
               {name: 'profession'},
 
            ]
        });
 
     //store.loadData(myData);
 
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {
 
                 header   : 'Name', 
                    width    : 160
 
                },
                {
                    header   : 'Profession', 
                    width    : 75 
 
                },
 
 
            ],
 
            height: 350
 
        });
 
        grid.render('db-grid');
 
});
</script>
</head>
<body>
<h2>Ajax Demo</h2>
 
</body>
 
</html>

C'est un bout de code de ma servelet:

Code java :

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
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
 
//  PrintWriter out = response.getWriter();
//  out.println("This Example demonstrates, using Ajax request to Access Servlet ");
     response.setContentType("text/html");    // Response mime type
 
     // Output stream to STDOUT
     PrintWriter out = response.getWriter();
 
 
    JSONObject myObject = new JSONObject();
 
 
 
    myObject.put("name","Jennifer");
    myObject.put("profession","teacher");
 
out.println(myObject);
 
 
JSONObject myRecord = new JSONObject();
myRecord.put("name","Jacques");
myRecord.put("profession","Doctor");
 
 
JSONArray myRecords = new JSONArray();
myRecords.add(myRecord);
}

Essayer de m'aider s'il vous plaît!C'est urgent!!

**sekaijin** · 19/06/2013, 16h05

ce n'est pas du tout la bonne approche

il faut définir un datastore avec un proxy http configuré avec l'url de ta servlet
ensuite dans la vue il faut associer le datastore avec ton grid
les données sont alors automatiquement placé dans la grid

tu n'a pas à faire d'appel ajax, le proxy le fait pour toi
tu as un exemple ici http://docs.sencha.com/extjs/4.2.1/e...?theme=classic

le code est sur le lien grid-filter-local.js.

il y a quelques erreurs dans ton code (déjà je conseille de séparer html de js comme dans l'exemple)

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <!-- ICI IL MANQUE : l'inclusion de la librairie ExtJS voir la doc -->
    <!-- utiliser un lien vers un fichier js -->
    <script type="text/javascript" src="monScript.js"></script>
  </head>
  <body>
    <h2>Ajax Demo</h2>
    <!-- ICI IL MANQUE : un div avec l'id utilisé pour placer le grid (paramètre du renderTo ) -->
    <div id="'db-grid' />
  </body>
</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
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
Ext.onReady(function(){
    var myData=null;
 
   // SUPPRIMER cet appel ajax et voir l'exemple
    Ext.Ajax.request({
        url: 'AccessServlet',
        method:'POST',
        success: function ( result, request ) { 
 
        // ATTENTION c'est comme en java on ne peux pas passer en paramètre un objet qu'on n'a pas initialisé
        store.loadData(myData);
        // Lire les données après avoir essyé de les mettre dans un store ne sert à rien (les lignes ont été inversées.)
        myData =Ext.decode(result.responseText);
        // pais tout ça ne sert à rien et est à supprimé
 
        },
        failure: function ( result, request) { 
                Ext.MessageBox.alert('Failed', result.responseText); 
        } 
    });
 
 
     // remplacer l'ArrayStore par un JsonStore voir l'exemple et la doc http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.JsonStore
     var store = new Ext.data.ArrayStore({
            fields: [
               {name: 'name'},
               {name: 'profession'},
 
            ]
        });
 
     //store.loadData(myData);
 
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {
 
                 header   : 'Name', 
                    width    : 160
 
                },
                {
                    header   : 'Profession', 
                    width    : 75 
 
                },
 
 
            ],
 
            height: 350
 
        });
 
        grid.render('db-grid'); //ICI tu utilise l'id du div définit dans le HTML or tu n'avais pas d'élément HTML dans ta page avec cet id
 
});

enfin ton code JAVA n'est pas bon non plus

Code java :

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
 
 
     // Output stream to STDOUT
     PrintWriter out = response.getWriter();
 
 
    JSONObject myObject = new JSONObject();
 
 
 
    myObject.put("name","Jennifer");
    myObject.put("profession","teacher");
 
out.println(myObject); //ici tu écrit sur la sortie {"name":"Jennifer", "profession":"teacher"}
 
 
JSONObject myRecord = new JSONObject();
myRecord.put("name","Jacques");
myRecord.put("profession","Doctor");
//puis tu ne mets plus rien

JsonStore store attend une réponse du serveur de la forme

Code :

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

1
2
3
4
5
6
7
{
   "collaborators": //<= le nom de l'élément root est celui que tu mets dans la définition de ton JsonStore root: 'collaborators',
   [
        {"name":"Jennifer", "profession":"teacher"},
        {"name":"Jacques", "profession":"Doctor"}
    ]
}

pour produire ça en java il te faut faire quelque chose comme

Code java :

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
 
 
     // Output stream to STDOUT
     PrintWriter out = response.getWriter();
 
    JSONObject persons= new JSONObject(); // la réponse à envoyer
 
    JSONObject myObject = new JSONObject();//jenifer
    myObject.put("name","Jennifer");
    myObject.put("profession","teacher");
 
 
   JSONObject myRecord = new JSONObject();//jacques
   myRecord.put("name","Jacques");
   myRecord.put("profession","Doctor");
 
   persons.put("collaborators", new JSONArray(new Array(2) {myObject, myRecord})); // ajout des deux personnes dans un tableau JSON référencé par la clef ""
 
 
   out.println(persons); //ici tu écrit sur la sortie

A+JYT

Récupération et affichage de données AJAX

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager