Page 1 sur 1

coupler javascript et mysql....

Posté : 10 sept. 2007, 10:27
par pierrot
Bonjour,
J'ai un formulaire html avec entre-autres un champ pays et un champ code_iso. Le champ pays se rempli en autocompletion...pas de pb. Mais ce que j'aimerai, c'est que le champ code_iso se remplisse automatiquement apres un onBlur sur mon Champ Pays.
En gros, j'aimerai que l'evenement OnBlur de Pays lance une requete sql sur ma table Pays qui contient les pays avec les code_iso et qui remplisse le champ cod_iso avec le resultat de la requete. Je suppose que c en Javascript qu'il faut faire ça, mais je ne sais pas coupler javascript et mysql...

Merci

Posté : 10 sept. 2007, 11:00
par Ryle
Tu ne peux pas lier Javascript et MySQL. En revanche, tu peux avec Ajax interroger une page php (ou autre) depuis Javascript et en récupérer le résultat (l'affichage). Tu peux donc très bien à partir de php interroger une base de données pour renvoyer une réponse à javascript;

Regarde dans le forum FAQ il y a des explications détaillées sur ce sujet :
:arrow: Formulaires : Listes déroulantes dynamiques liées.

Le fait que ce soit des listes déroulantes dans le tuto ne doit pas te bloquer, le principe s'adapte à tout champs liées :)

Posté : 10 sept. 2007, 12:06
par pierrot
merci bien,
Je me doutais que ca devait être en AJAX...et c'est là tout le pb. J'ai beau lire et relire les scripts en ajax, je comprends pas grand chose. Si une bonne âme charitable a du tps à me consacrer pour m'expliquer pas à pas la marche à suivre des scripts, je lui en serait très reconnaissant !!! et puis ptet que comme ça je comprendrais enfin les scripts en ajax.

Merci

Posté : 13 sept. 2007, 11:21
par Ryle
Ajax, c'est pas compliqué, c'est un objet (XMLHttpRequest) et deux fonctions pour envoyer et recevoir des données, on en a vite fait le tour :)

La classe XMLHttpRequest permet d'interagir avec le serveur grâce à ses méthodes et ses attributs. La première chose à faire est donc de l'instancier, sachant que cela ne se fait pas de la même façon entre IE et FF :
if (window.XMLHttpRequest) { //  On test si l'objet existe
  xhr = new XMLHttpRequest(); //  Firefox, Safari, ...
} 
else if (window.ActiveXObject) { //  Version ActiveX
  xhr = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer 
}
Etape suivante, envoyer des données au serveur. Pour cela on utilise deux méthodes de XMLHttpRequest :
- open() : qui permet de spécifier si les données seront envoyées en GET ou POST, à quelle URL elle seront envoyée, et si le traitement est asynchrone.
- send() : lorsque tu utilises la méthode POST, tu lui spécifies les données à envoyer (param1=valeur1&param2=valeur2&...). Avec la méthode GET, elles sont à spécifier directement dans l'url, on envoi donc la valeur null
xhr.open('GET', 'http://www.phpfrance.com/fichier.php', true);
xhr.send(null);
Nota : pour envoyer des données en post, il faut également spécifier le header suivant avant d'envoyer les données :
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 


Enfin, attendre et traiter la réponse. Les données fournies par le serveur sont récupérées dans les champs responseXml ou responseText de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans responseXml par les méthodes de Dom.

Il faut attendre la disponibilité des données dont l'état est donné par l'attribut readyState de XMLHttpRequest. L'attribut readyState va prendre plusieurs valeurs, seule la dernière est vraiment utile :

Code : Tout sélectionner

0 : non initialisé 1 : connexion établie 2 : requête reçue 3 : réponse en cours 4 : terminé
On va donc utiliser la propriété onReadyStateChange qui est activée à chaque changement d'état. Pour cela on lui assigne une fonction pour traiter les données et on traite le cas où la réponse est bien arrivée :
xhr.onreadystatechange = function() { // traitement  de la réponse 
  if (xhr.readyState == 4) { // la réponse a bien été renvoyée

     if (xhr.status  == 200) // on vérifie qu'il n'y a pas eu d'erreur
        document.getElementById('monDiv').innerHTML = xhr.responseText; // met à jour un div par ex
     else // si la page n'est pas trouvée (404), les droits sont insuffisants (501), ...
        alert ("Erreur : " + xhr.status);

  }
}
HTH :)