Récupérer une variable retournée par ajax

Version imprimable

Bonjour à Tous,

Je fais appel à Ajax pour récupérer une variable dans un script PHP.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function calcule_cde(){ ..... ..... var port = calcule_port(id_four,tot_cde); console.log(port); // affiche undefined } function calcule_port(id_four,montant){ $.ajax({ "type":'POST', "url": 'xhr_calcule_port.php', "data": 'id_four='+id_four+'&montant_cde='+montant, "success": function (data) { console.log(data); // affiche 35.00 le bon montant return data; } }); }
Je pense que le code est explicite : dans le success j'affiche le bon port, mais le return ne retourne rien.
Peut être un souci de synchronisation, mais je vois pas...

02/07/2015, 13h42
www.diazis.com

Bonjour,

Je ne connais pas JQuery, mais ton return ne devrait-il pas être dans ta fonction calcule_port et non dans la fonction ajax ?

Essaye

Code:

1
2
3
4
5
6
7
8
9
10
11
function calcule_port(id_four,montant){
	return $.ajax({
		"type":'POST',
		"url": 'xhr_calcule_port.php',
		"data": 'id_four='+id_four+'&montant_cde='+montant,
		"success": function (data) {
                console.log(data); // affiche 35.00 le bon montant
        	return data;
    	}
	});
}

02/07/2015, 14h51
renaud26

Pareil : le log est ok mais le chiffre n'est pas retourné.

Citation:

Je ne connais pas JQuery, mais ton return ne devrait-il pas être dans ta fonction calcule_port et non dans la fonction ajax ?

Bah, j'ai aussi tenté d'implémenter une variable et de la retouner, mais c'est pas mieux
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function calcule_port(id_four,montant){ var port = 0; $.ajax({ type:'POST', url: 'xhr_calcule_port.php', data: 'id_four='+id_four+'&montant='+montant, success: function (data) { console.log(data); port = data; } }); return port; }

Si on regarde le javascript (qui doit être utilisé par JQuery)
Code:

1 2 3 4 5 6 7 8 var xhr = new XMLHttpRequest(); xhr.open('POST', url); xhr.send(postElements); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // ici tu as la valeur de retour } }
Et effectivement comme c'est asynchrone, tu ne peux pas recevoir la réponse dans ta fonction initiale car elle a déjà fini son boulot avant la réponse.
Et c'est bien ce que tu démontres avec consol.log.
Donc la seule solution est d'utiliser ta fonction lancée par success pour faire la fin de ton traitement prévue dans calcule_port (affichage, poursuite du calcul...). Soit directement dans cette fonction, soit en appelant une fonction fin_calcule_port avec data en paramètre.

02/07/2015, 15h42
renaud26

Oui, je viens aussi de m'en rendre compte.
En passant async à false, ça fonctionne mais avec l'avertissement suivant dans la console:

Citation:

L'utilisation d'XMLHttpRequest de façon synchrone sur le fil d'exécution principal est obsolète à cause de son impact négatif sur la navigation de l'utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d'informations.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Si l'on aime se compliquer la vie
// (traiter la valeur retournée en dehors de la transaction AJAX)
// il faut utiliser un objet différé (promesse).
 
var dfd = $.Deferred();
 
function calcule_port( id_four, montant ){
 
    var jqXHR = $.post( "xhr_calcule_port.php", {
        'id_four' : id_four,
        'montant_cde' : montant
    });
 
    setTimeout( function(){
        // Si l'objet différé existe dans l'état "attendre", 
        // alors exécute la méthode fail()
 
        if ( jqXHR && jqXHR.state() === "pending" ){
            jqXHR.abort();
        }
    }, 3000 ); // 3s
 
    jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        //console.log( data, textStatus, jqXHR );
 
        dfd.resolve( data );
        // console.log(data); // affiche 35.00 le bon montant
    });
 
    jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        //console.log( jqXHR, textStatus, errorThrown );
 
        dfd.reject( -1 );
    });
 
    jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        // nettoyage
        // exécution d'un code dépendant
        //console.log( jqXHR, textStatus );
 
    })
}
 
function calcule_cde(){
    var port = 0;
 
    calcule_port( id_four, tot_cde);
 
    dfd.then(
        function( value ){
            port = value;
            console.log( "done, port = ", value );
 
            // succès de la transaction AJAX, votre code dépendant de la valeur de port ici
        },
        function( value ){
            port = value;
            console.log( "fail, port = ", value );
 
            // échec de la transaction AJAX, votre code dépendant de la valeur de port ici
       }
    );
 
    // ici port vaudra toujours 0, car ce code sera exécuter avant la transaction AJAX
}

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
43
44
// sans l'objet différé
 
function calcule_cde(){
    var port = 0,
        jqXHR = $.post( "xhr_calcule_port.php", {
            'id_four' : id_four,
            'montant_cde' : montant
        });
 
    setTimeout( function(){
        // Si l'objet différé existe dans l'état "attendre", 
        // alors exécute la méthode fail()
 
        if ( jqXHR && jqXHR.state() === "pending" ){
            jqXHR.abort();
        }
    }, 3000 ); // 3s
 
    jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        //console.log( data, textStatus, jqXHR );
 
        port = data;
        // succès de la transaction AJAX, votre code dépendant de la valeur de port ici
    });
 
    jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        //console.log( jqXHR, textStatus, errorThrown );
 
        port = -1;
        // échec de la transaction AJAX, votre code dépendant de la valeur de port ici
    });
 
    jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        // nettoyage
        // exécution d'un code dépendant
        //console.log( jqXHR, textStatus );
 
    })
 
    // ici port vaudra toujours 0, car ce code sera exécuter avant la transaction AJAX
}