Réalisation d'une action javascript en ajax

12 mai 2009, 13:47

Bonjour à tous,

je voudrait savoir comment faire pour réaliser une action en javascript après avoir interrogé ma base en ajax.

Explication:

J'ai un champ input ou j'indique un code produit.
En ajax j'interroge ma base, qui me retourne dans ma page ok ou non ok. Jusqu'a la pas de probleme.
Mais je voudrait réaliser une action javascript sur la page en fonction du résultat de ma requete.

j'ai essayer ceci: (c'est ma page php qui check si le produit existe ou pas):

Code : Tout sélectionner

<?php
	
	if(isset($_POST["idauteur"])){
		$test= $_POST["idauteur"];
	$sql3 = "select ref_pdt, code_pdt, nom_pdt FROM produit WHERE code_pdt = '$test' ORDER BY code_pdt";
	$query3 = mysql_query($sql3) or die('erreur');
	$nb3= mysql_num_rows($query3);
	if ($nb3 == null){
	echo "<br/> Pas de  produit.";
	echo "<script type=\"text/javascript\">alert(test);</script>";
	} else {
	echo "<br/> un ou plusieur produit enregistrer.";
	echo "<script type=\"text/javascript\">alert(test); </script>";

	}
	}
	//print_r($_POST)
?>

Comme indiqué dans le code j'ai rajouter une action javascript mais elle ne se réalise pas.

Quel erreur est-je commis? Ce n'est pas la bonne démarche?

Merci

guigui69

12 mai 2009, 14:58

Bonjour.

ton code javascript est compris comme du text.

Je te conseill de plutot de faire ta requete, de lui renvoyer soit "ok", soit "ko", et c'est ensutie ton javascript qui affiche en fonction du résultat ce que tu veux.

Exemple avec prototype :

Code : Tout sélectionner

var url = 'adresse-de-ton-script';

new Ajax.Request(url, {
  method: 'get',
  onSuccess: function(resultat) {
	switch(resultat)
	{
		case 'ok':
			//traitement si c'est okay
		break;
		case 'ko':
			//traitement si ce n'est pas bon
		break;
	}
  }
});

?php

$res = array();
if(isset($_POST["idauteur"])){
	$test= $_POST["idauteur"];
	$sql3 = "select ref_pdt, code_pdt, nom_pdt FROM produit WHERE code_pdt = '$test' ORDER BY code_pdt";
	$query3 = mysql_query($sql3) or die('erreur');
	$nb3= mysql_num_rows($query3);
	if ($nb3 == null){
		$res['txt'] = "<br/> Pas de  produit.";
		$res['result'] = "ok";
	} else {
		$res['txt'] = "<br/> un ou plusieur produit enregistrer.";
		$res['result'] = "ko";
	}
}
print_r(json_encode($res));
exit;
//print_r($_POST)
?>

12 mai 2009, 17:49

Merci pour ton aide

Code : Tout sélectionner

function check_produit(){
				var xhr = getXhr();
				 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('info').innerHTML = leselect;
						}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajax/ajax_check_produit.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				idauteur = document.getElementById('code_pdt').value;
				//alert(idauteur);
				xhr.send("idauteur="+idauteur);
			
			var url = '/ajax/ajax_check_produit.php';

			new Ajax.Request(url, {
			method: 'get',
			onSuccess: function(resultat) {
			switch(resultat)
			{
			case 'ok':
				//traitement si c'est okay
				alert('essai');
			break;
			case 'ko':
			alert('essai');
			//traitement si ce n'est pas bon
			break;
   }
  }
}); 
			
			
			}

il me dit qu'il ajax n'est pas définie, je pense que c'est du au fait qu'il est générer par prototype.

Comment faire pour résoudre ce problème?

Merci

guigui69

13 mai 2009, 15:56

il me dit qu'il ajax n'est pas définie, je pense que c'est du au fait qu'il est générer par prototype.Comment faire pour résoudre ce problème?

http://www.prototypejs.org/download
Pour cela il te faut télécharger le fichier prototype.js et l'inclure dans l'en-tête de tes scripts php qui l'utilisent, via une ligne du style

<script type="text/javascript" src="javascript/prototype.js"></script>

Evidemment le chemin relatif (ici javascript/prototype.js) devra être adapté à ton cas.

13 mai 2009, 17:11

Sinon, sans utiliser prototype, il suffit de comprendre le principe d'ajax et d'adapter un peu ton code en conséquence

Déjà, faire du javascript avec ajax ne veut pas dire grand chose... ajax n'est rien d'autre que du javascript

Le principe d'ajax est simple, tu envois une requête au serveur à l'aide de javascript, le serveur traite ta requête et retourne un résultat que tu récupères à l'aide de javascript.

Dans ton cas, tu récupères le résultat du traitement dans ta variable leselect (leselect = xhr.responseText). Cette variable contient tout le texte que ton serveur aura affiché, sous la forme d'une chaine.
Tu peux donc à partir de là vérifier le contenu de cette chaine pour effectuer tous les traitement javascript que tu souhaites...

Supposons que ton code php se contente de te renvoyer le nombre de résultats trouvés :

...
$sql3 = "SELECT COUNT(*) AS nb FROM produit WHERE code_pdt = '".$test."' ORDER BY code_pdt"; 
$query3 = mysql_query($sql3) or die('erreur'); 
$row = mysql_fetch_assoc($query3); 
echo $row['nb'];
...

Nota : J'ai collé un count dans ta requête, c'est plus performant de compter directement les lignes que de ramener chaque enregistrement et de les compter ensuite

Dans ta variable "leselect" côté javascript, tu vas donc récupérer le nombre d'enregistrements correspondant et ensuite pouvoir faire tout les traitements que tu veux :

...
if(xhr.readyState == 4 && xhr.status == 200){ 
  leselect = xhr.responseText; 
  if (leselect==0)
    alert('Y en a pô !')
  else if (leselect==1)
    alert('zavez de la chance, il m\'en reste un !')
  ...
} 
...

A partir de là, ton script php peut afficher tout et n'importe quoi, dès lors que ton javascript saura le géré. Il peut par exemple retourner le nombre de résultat ainsi qu'une liste des résultats, le tout séparé par un | que tu exploseras avec un split()... où au besoin, au lieu de renvoyer du texte brut, tu pourras renvoyer du xml avec toutes les infos dont tu as besoin, et qu'il te suffira de parcourir pour les utiliser

14 mai 2009, 09:29

Merci pour ton aide,

Je suis intéressée par le cas ou il y a plusieurs informations,

Aurais-tu des exemples pour montrer comment récupérer plusieurs information et les traiter une par une?

Merci

guigui69

15 mai 2009, 14:38

Basiquement, si par exemple ta page php affiche/retourne quelque chose du genre :

Code : Tout sélectionner

666|3|<b>voiture, velo, moto</b>

En supposant que cela corresponde au code produit, nombre de résultats trouvés, et résultats trouvés.
Tu peux dans ton code javascript traiter cette chaine comme bon te semble :

if(xhr.readyState == 4 && xhr.status == 200){  
  leselect = xhr.responseText;  
  tab = leselect.split('|'); // on sépare les résultats

  alert('Il y a '+tab[1]+' enregistrements en base'); // on informe du nombre de résultats trouvés

  document.monFormulaire.champPourStockerCodePdt.value = tab[0]; // on met à jour un champ d'un formulaire

  document.getElementById("divPourAfficherLesResultats").innerHTML = tab[2]; // on rempli un div avec le résultat
  ... 
}

Ca c'est la solution basique et rapide si tu renvoi 2 ou 3 infos simples. Si tu as besoins d'infos plus complexes, tu peux faire générer du xml par php, pour formater tes données comme tu le souhaites, par exemple :

Code : Tout sélectionner

<produits id="666" nombre="3">
  <produit>
    <id>25</nom>
    <nom>voiture</nom>
    ...
  </produit>
  <produit>
    <id>37</nom>
    <nom>velo</nom>
    ...
  </produit>
...
</produits>

Et à partir de là, tu peux utiliser un parseur xml javascript qui te permettra d'aller chercher l'id et le nom de chaque produit, et d'en faire ce que bon te semble (alimenter un select, remplir un champ de formulaire, renseigner un div....)

Réalisation d'une action javascript en ajax

Qui est en ligne