Ajax return undefined data

**sonia39** · 14/06/2018, 16h47

Bonjour,

j’utilise jquery ajax pour appeler un web service de type get codé en java.

L'appel est bien passé (satuts= 200, textStatus= 4), mais il me met undefined comme réponse de la fonction success.

Pouvez vous m'aider svp et me dire où est l'erreur?

Merci.

Mon web serveur:

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
@GET
    @Path("/term/{term}")
    @Produces({MediaType.APPLICATION_JSON})
    public Response termQuery(@PathParam("term") String term ) {//, @PathParam("index") String index, @PathParam("type") String type) {    
        try {
 
            log.debug("searsh");
            //log.debug("index = " + index);
           // log.debug("type = " + type);
            log.debug("term = " + term);
         List<String> results = multiTypeSearchService.getTermQueryData(term);
            if (null == results) {
                return Response.status(Status.BAD_REQUEST).entity("arg obligatoire").build();
                }
         //String  suggestions = String.join(",", results);
            String json = new Gson().toJson(results);
            return Response.ok(json).build();
        } catch(Exception e) {
               return tmExceptionMapper.toResponse(new TmException(Code.TECHNICAL_ERROR, e.getMessage()));
           }
    }

jquery code:

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h1>Recupération de données ...!</h1>
    <textarea id ="input_search" class="form-control custom-control" rows="10"></textarea> 
    <textarea id = "output" class="Output" rows="10"></textarea>
    <button type="button" onclick="readfile()">Search</button>
<script>
         
      var showoutput = $('#output');   
      var Url_newtm = 'http://localhost:8080/newtm/term/';
      function readfile(){
        var text_search = $('#input_search').val();
        $.ajax({
            //headers: {'Access-Control-Allow-Methods': 'GET'},
            contentType: "application/json; charset=UTF-8",
            type:'GET',
            data: {},
            url:Url_newtm+text_search,
            dataType: "script",
            async: false,
             
            success: function(data, jqXHR, textStatus){
                //alert(data);
                //$('#output').html(result);
                console.log(data);
              },
              error: function(jqXHR, textStatus, errorThrown){
                console.log("error");
                console.log(errorThrown)
                console.log(textStatus)
                console.log(jqXHR);
              },
          });
      }
</script>
</body>
</html>

Nom : 1.PNG
Affichages : 7602
Taille : 49,3 Ko

**bonjourajax** · 14/06/2018, 20h50

Bonsoir

dataType: "script",

L'erreur vient du fait qu'il ne sait pas lire ce qu'il recoit avec ce dataType

**sonia39** · 14/06/2018, 21h10

Bonsoir,

Merci pour la réponse.

j'ai déjà essayé avec dataType: 'json' et ça ne marche pas. il me renvoie une erreur ci dessous et error pour textStatus.

Code :

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

Object { readyState: 0, getResponseHeader: .ajax/E.getResponseHeader(), getAllResponseHeaders: .ajax/E.getAllResponseHeaders(), setRequestHeader: .ajax/E.setRequestHeader(), overrideMimeType: .ajax/E.overrideMimeType(), statusCode: .ajax/E.statusCode(), abort: .ajax/E.abort(), state: .Deferred/i.state(), always: .Deferred/i.always(), catch: .Deferred/i.catch(), 9 de plus… }

ataType: 'script' je l'ai utilisé pour qu'il ne fasse pas une demande cross domain.

je n'arrive toujours pas à comprendre c'est quoi le problème

**Watilin** · 16/06/2018, 14h33

Bonjour,
alors pour commencer :

Code :

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

async: false

Non.

Le premier « A » de ajax signifie « asynchrone ». Quand on force le mode synchrone, ça devient « sjax », et personne n’utilise ce terme pour deux bonnes raisons :

c’est imprononçable ;
c’est une mauvaise pratique.

En plus, tu as l’air de déjà maîtriser le principe des callbacks, donc tu n’as aucune bonne raison de faire du synchrone.

Ensuite, je vois que tu utilises jQuery 3. Je te conseil de mettre à jour ton code en suivant les recommandations de la doc :

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

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
'use strict';
 
let showoutput = $('#output');
let Url_newtm = 'http://localhost:8080/newtm/term/';
 
function readfile () {
  let text_search = $('#input_search').val();
  $.ajax({
    //headers     : { 'Access-Control-Allow-Methods': 'GET' },
    contentType : 'application/json; charset=UTF-8',
    method      : 'GET',
    data        : {},
    url         : Url_newtm + text_search,
    async       : true, // !!!
    //dataType    : ...,                        // (1)
  })
    .done(function (data, textStatus, jqXHR) {
      console.log(data);
      //$('#output').html(...);                 // (2)
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
      console.log("error");
      console.log(errorThrown)
      console.log(textStatus)
      console.log(jqXHR);
    });
}

Deux remarques dans ce code :

(1) le dataType n’est probablement pas nécessaire. Sans bien connaître le Java serveur, je devine que cette ligne :

Code java :

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

@Produces({MediaType.APPLICATION_JSON})

fait en sorte que le serveur envoie un en-tête Content-Type: application/json. Cet en-tête sera détecté par jQuery. Si tu ajoutes dataType, l’en-tête est ignoré. Il vaut mieux faire confiance aux informations envoyées par le serveur.

(2) si le json est interprété correctement, le paramètre data est de type JavaScript object. Lorsque tu le passes à .html, il est converti en chaîne via .toString() et devient la représentation complètement inutile '[object Object]'. Un peu de traitement est nécessaire ici, et ne connaissant pas la structure de ton json, je ne peux pas t’aider.
Si tu veux simplement afficher le json, tu peux utiliser JSON.stringify(data), ou bien écraser le Content-Type en mettant l’option dataType: 'text'.

Ajax return undefined data

jQuery

Discussions similaires

Partager

Partager