JS - AJAX asynchrone - comment faire remonter une variable

JS - AJAX asynchrone - comment faire remonter une variable - Javascript/Node.js - Programmation

Marsh Posté le 17-03-2015 à 15:15:10    

Bonjour.

 

J'ai un problème connu avec ajax :D
Tellement connu que je n'arrive pas à la résoudre.

 

Pour résumer, j'interroge une base sql avec $.post de la façon suivante :

 
Code :
  1. function check_stock(bc){
  2. $.post("check_stock_sql.php",
  3.          {bc:bc},
  4.          function(data,status){return_data(data)})
  5. }
  7. function return_data(data){
  8.             return data;
  9. }
 

Et dans un autre fichier, j'appelle ma fonction de la façon suivante :

 
Code :
  1. var etat = check_stock(bc);
 

Evidemment, etat = undefined à la fin... Si un spécialiste Ajax peut m'aiguiller :/
J'ai cherché dans tous les sens, je ne vois pas où est ma connerie.


Message édité par _pollux_ le 17-03-2015 à 15:16:14

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 17-03-2015 à 15:15:10   

Reply

Marsh Posté le 17-03-2015 à 18:00:39    

bon, j'ai compris, mais je bloque un poil plus loin :/
 
j'ai fais ça :
 

Code :
  1. function foo(callback){
  2.           $.post("check_stock_sql.php",
  3.                   {bc:bc},
  4.                   callback}
  6. foo(function(result){
  7.             console.log(typeof result+ '   '+ result);
  8.             switch (result){
  9.               case '1':
  10.               alert ('1');
  11.               break;
  12.               case '2':
  13.               alert ('2');
  14.               break;
  15.               case '3':
  16.               alert ('3');
  17.               break;
  18.               default:
  19.               alert('probleme');
  20.               break;
  21. }


 
problème suivant : quelque soit le cas, je tombe sur le case default, alors que la console me renvoie "string  1"


Message édité par _pollux_ le 17-03-2015 à 18:01:56

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 18-03-2015 à 12:05:15    

Bon, problème résolu, mais j'aimerais comprendre si un expert passe :D

 

J'ai feinté en rajoutant :

Code :
  1. result = Number(result)
  2. result = result.toString
 

le résultat de mon console.log est exactement le même : string   1, mais là, le switch sait l'interpréter ...


Message édité par _pollux_ le 18-03-2015 à 12:05:38

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 18-03-2015 à 18:58:21    

As tu testé la longueur de ton result ?
tu testes '1', '2', etc... mais il est possible que pour une raison ou une autre sa valeur soit '1 ', '2 ' ou qqch comme ca, bref des espaces en trop ;)
 
Si tu n'as pas le controle la dessus du coté serveur, tu peux faire :
switch (result.trim ())
{
 case '1':
 // ...
}
 
go https://developer.mozilla.org/fr/do [...] tring/trim


Message édité par SICKofitALL le 18-03-2015 à 18:58:56

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 18-03-2015 à 23:51:50    

ah, merci pour l'info, j'essaye ça demain :)


---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 19-03-2015 à 17:38:39    

bon, j'ai essayé et tu avais raison, . :jap:
Les valeurs remontent après ma requête sql grâce à un simple echo "1"; echo "2" ... en fonction du résultat de la requête. Ce qui introduit un retour chariot que je n'avais pas détecté. :D
 
Je ne sais d'ailleurs pas si il y a un autre moyen de faire remonter l'info.


---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 19-03-2015 à 18:35:36    

en JSON par exemple, particulièrement adapté:

Code :
  1. // du coté serveur
  2. // ...
  3. $result = 1; // un entier !
  4. $json = array ("result" => $result, "autreValeur" => "une chaine" );
  5. header ('Content-type: application/json');
  6. echo json_encode ($json); // PHP 5.2+
  8. // du coté client
  9. foo (function (result)
  10. {
  11.             var json = JSON.parse (result); // convertit la chaine retournée en object JS
  12.             switch (json.result)
  13.             {
  14.               // plus besoin de conversion
  15.               case 1:
  16.               alert (json.autreValeur);
  17.               break;
  19.               case 2:
  20.               alert (2);
  21.               break;
  23.               /* ... */
  25.               default:
  26.               alert ('probleme');
  27.               break;
  28. }


 
Done :)


Message édité par SICKofitALL le 19-03-2015 à 18:40:11

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-03-2015 à 18:36:27    

Tu peux même faire en sorte que jQuery fasse la conversion pour toi, mate getJSON -> http://api.jquery.com/jquery.getjson/


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 20-03-2015 à 08:48:06    

j'allais justement proposer Json, mais comme je n'avais pu eu le temps de me pencher dessus, j'avais peur de dire des bêtises.
Merci pour l'exemple en tout cas :jap:


---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 20-03-2015 à 14:57:25    

Bon, à chaque solution son nouveau problème ... en l'occurrence avec JSON :/
 
j'fais ça :

Code :
  1. $json=array('a' => 1, 'b' =>2, 'c' =>3);
  2. header('Content-type : application/json');
  3. echo json_encode($json)


 
Quand je récupère le truc via $.ajax ou $.post, il refuse le JSON.parse parce que ce que j'ai récupéré est un objet...
Je ne comprends pas bien, il me semblait que json_encode devait retourner un tableau sous forme de chaîne qui puisse être compris par JSON.parse ...
 
Donc, pour résoudre le problème, je fais simplement un switch(result.a) qui me retourne bien 1.


Message édité par _pollux_ le 20-03-2015 à 15:09:51

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 20-03-2015 à 14:57:25   

Reply

Marsh Posté le 20-03-2015 à 16:57:02    

Utilises-tu un debugger ou tu bosses à l'aveugle ?
Genre Firebug ou les outils de dev natifs de Firefox ou Chrome ?
 
Avec ce genre d'outils, tu peux voir ce qui transite.
Il est possible que en fonction de la facon dont tu fais l'appel, jQuery transforme tout seul le json en object JS.
Donc dans ce cas, en effet, pas besoin de parser ;)

Message cité 1 fois

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 20-03-2015 à 17:36:15    

SICKofitALL a écrit :

Utilises-tu un debugger ou tu bosses à l'aveugle ?
Genre Firebug ou les outils de dev natifs de Firefox ou Chrome ?
 
Avec ce genre d'outils, tu peux voir ce qui transite.
Il est possible que en fonction de la facon dont tu fais l'appel, jQuery transforme tout seul le json en object JS.
Donc dans ce cas, en effet, pas besoin de parser ;)


 
Me semble pas utiliser une façon particulièrement peu commune :D

Code :
  1. function check_stock(callback){
  2.        $.ajax({url : "check_stock_sql.php",
  3.          type : "POST",
  4.          datatype : "json",
  5.          data : {bc:bc},
  6.          success : callback
  7.          })
  8.       }
  10.       check_stock(function(result){
  11.        switch(result.status){
  12.         case "0":
  13.         alert("unknown element" );
  14.         break;
  15.         case "1":
  16.         affichage(bc,type);
  17.         break;
  18.         case "2":
  19.         alert("this element is not available in stock" );
  20.         break;
  21.         default:
  22.         alert('probleme');
  23.         }
  24.       });


 
Bon, par contre, c'est vrai que je suis un vrai débutant, donc ceci explique cela... pas de bases valables :D
 
j'utilise l'outil natif de chrome pour le débugage, mais quand je lis ce qui suit, je capte pas forcément tout :D
 

Code :
  1. Remote Address:192.168.0.196:80
  2. Request URL:http://192.168.0.196/toto/check_stock_sql.php
  3. Request Method:POST
  4. Status Code:200 OK
  5. Response Headers
  6. view source
  7. Connection:Keep-Alive
  8. Content-Length:16
  9. Content-Type:application/json
  10. Date:Fri, 20 Mar 2015 14:46:04 GMT
  11. Keep-Alive:timeout=5, max=100
  12. Server:Apache/2.4.9 (Win64) PHP/5.5.12
  13. X-Powered-By:PHP/5.5.12
  14. Request Headers
  15. view source
  16. Accept:*/*
  17. Accept-Encoding:gzip, deflate
  18. Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
  19. Connection:keep-alive
  20. Content-Length:16
  21. Content-Type:application/x-www-form-urlencoded; charset=UTF-8
  22. Cookie:PHPSESSID=2poip6ltm8p4b6n43bonmd6pr1
  23. Host:192.168.0.196
  24. Origin:http://192.168.0.196
  25. Referer:http://192.168.0.196/toto.php
  26. User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36
  27. X-Requested-With:XMLHttpRequest
  28. Form Data
  29. (1)
  30. Name
  31. Path


Message édité par _pollux_ le 20-03-2015 à 17:42:19

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 20-03-2015 à 20:05:50    

Concernant l'outil de chrome, mate ce screenshot, tu peux voir directement ce qui arrive :
https://developer.chrome.com/devtools/docs/network-files/response.png
 
Dans ta requete, sous jQuery, tu précises
datatype : "json"
 
Il ya des grandes chances (check les docs) que jQuery s'attend du coup à recevoir du JSON, et donc fait donc la conversion string->object directement.
Quand on récupere du JSON, de tte facon c'est pour l'utiliser en tant qu'object, jQuery te facilite donc le taf :)

Message cité 1 fois

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 21-03-2015 à 10:19:40    

SICKofitALL a écrit :

Concernant l'outil de chrome, mate ce screenshot, tu peux voir directement ce qui arrive :
https://developer.chrome.com/devtools/docs/network-files/response.png

 

Dans ta requete, sous jQuery, tu précises
datatype : "json"

 

Il ya des grandes chances (check les docs) que jQuery s'attend du coup à recevoir du JSON, et donc fait donc la conversion string->object directement.
Quand on récupere du JSON, de tte facon c'est pour l'utiliser en tant qu'object, jQuery te facilite donc le taf :)


Pour l'outil, je le connais et l'utilise, pas de soucis (il m'a été indispensable pour plein de debuggage :D ). Mon problème, par manque de base, c'est plus la grammaire entre les string, les objets, etc... et donc, des crochets ou des accolades, ça ne me parle pas directement :D
Pour l'explication, effectivement, c'est le plus logique :jap:


Message édité par _pollux_ le 21-03-2015 à 10:20:33

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 28-09-2015 à 14:45:40    

Bon, je remonte ce topic avec une nouvelle question qui a trait à JSON :)
Je fais des graph avec l'excellente bibliothèque highchart, mais je ne comprends pas bien toutes les subtilités des exemples proposés.

 

Grosso modo, côté serveur, j'ai ça :

Code :
  1. $callback = $_GET['callback'];
  3. // ici, j'interroge ma bdd et je récupère de quoi remplir mon tableau
  4. $data[] = "[$utc*1000, $hchp]";
  6. // ici, je remplie ma réponse
  7. echo $callback."([\n" . join(",\n", $data) ."\n]);";
 

et côté client :

Code :
  1. $.getJSON('requestHighLoadData.php?callback=?', function(donnees) {
  2.   $('#container2').highcharts({ data:donnees )})
 

Ce que je ne comprends pas, c'est comment fonctionne callback, sachant que si je l'omets, le serveur est bien interrogé, renvoie bien le tableau, mais ça s'arrête là.
callback? envoie une donnée du type "Jquery334345436439225_234389234820" qui viens donc s'ajouter en entête de l'objet JSON.

 

C'est indispensable pour identifier les données en retour ?


Message édité par _pollux_ le 28-09-2015 à 14:49:37

---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Marsh Posté le 28-09-2015 à 22:45:06    

c'est du JSONP je suppose. Ca permet de traiter les données qui ne sont pas forcement sur le même serveur qui fourni le JS (le fameux Same Origin Policy).


Message édité par SICKofitALL le 28-09-2015 à 22:47:08

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 29-09-2015 à 13:15:16    

Ok, je regarderai ça de plus près à l'occasion :)


---------------
Le topic du sport électronique@hfr : watch the l33t !
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed