Ajax return undefined data

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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>

Pièce jointe 388774

14/06/2018, 20h50
bonjourajax

Bonsoir

Citation:

dataType: "script",

L'erreur vient du fait qu'il ne sait pas lire ce qu'il recoit avec ce dataType
14/06/2018, 21h10
sonia39

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:

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 :(

Bonjour,
alors pour commencer :

Code:

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 :

Citation:

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:

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 :
:fleche: (1) le dataType n’est probablement pas nécessaire. Sans bien connaître le Java serveur, je devine que cette ligne :

Code:

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

:fleche: (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'.