Partage

requete SQL et AJAX

Sujet résolu

8 janvier 2009 à 12:06:45

Bonjour, je viens de me pencher sur l'AJAX, et bien entendu cela ne marche pas pour une première fois, malgré le tuto. Je m'explique : je souhaiterais faire une vérification de l'existence d'un pseudo par l'ajax en vérifiant directement sur la BDD.

<?php
function insc_login_verif($log)
{
	$reponse = new xajaxResponse();
	$reponse->call('verif_pseudo(document.getElementById("pseudo").pseudo.value)'); 
	$req = mysql_query("SELECT COUNT(pseudo) FROM membre WHERE pseudo='$log'");
	$rep = mysql_fetch_row($req);
	if($rep[0] >= 1)	
	{
		$reponse->assign('insc_pseudo', 'innerHTML', 'le pseudo est déjà utilisé.');
	}
	else
	{
		$reponse->assign('insc_pseudo', 'innerHTML', 'Pseudo valide.');
	}
	return $reponse;
}

<form><input name="pseudo" type="text" id="pseudo" onkeyup="xajax_insc_login_verif();" /> <span id="insc_pseudo">Resultat...</span></p></form>

Cela est-il possible (car cela ne marche pas), sinon faut-il passer par un fichier annexe ?
Le call n'appelle pas la fonction en question, et rien ne s'affiche dans le span.
Merci beaucoup

Attonde

8 janvier 2009 à 12:50:21

Ne confond pas ajax et xajax.
Comme je le dis toujours, xajax est bien pourri comme il faut, et compliqué avec ça !
Donc: http://www.siteduzero.com/tutoriel-3-4 [...] vascript.html

Et puis jte file le code parce que t'as une bonne bouille =D

function getXMLHttpRequest() {
        var xhr = null;
 
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.ActiveXObject) {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                } else {
                        xhr = new XMLHttpRequest();
                }
        } else {
                alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
                return null;
        }
 
        return xhr;
}
function ajax(input, rendu, transmis, php) {
var xhr = getXMLHttpRequest();
var value = document.getElementById(input);
if(xhr && xhr.readyState != 0) {
xhr.abort();
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
document.getElementById(rendu).innerHTML = xhr.responseText;
}
}
xhr.open("POST", php, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(transmis + "=" + value);
}

Tu mets ce code JS.
Sur ton champs tu mets onblur="ajax('id du input', 'id du texte qui change', 'nom de la variable post', 'nom de la page.php')".

Dans ta page php tu mets le code qu'il te faut pour vérifier et tu mets ce qu'il y a à afficher avec echo.
N'oublie pas de mettre un <div id="id du texte qui change"></div> dans ton code quelque part.

Bye !
(considère toi comme un super privilégié mdr, jamais je fais un tel truc ! (donner la solution sans que tu réfléchisses))

ocelote

8 janvier 2009 à 12:54:16

Merci, mais puisque tu es là, pourquoi dis tu que xajax c'est pourri? Selon toi il est préferable d'utiliser ajax ?
Je vais méditer ton code tout de même xD, je suis pas à accepter ce qu'on me dit

Merci encore

Attonde

8 janvier 2009 à 14:11:57

Citation : ocelote

Je vais méditer ton code tout de même xD, je suis pas à accepter ce qu'on me dit

*happy*
Pourquoi je n'aime pas xajax ?
xajax après tout, c'est générer du javascript en PHP ? mais quelle idée franchement ??
Pourquoi ne pas coder directement en ajax ?? C'est plus simple ! Et il y a la génération du code en moins! (donc gain de temps sur la génération de la page).
De plus xajax contraint à utiliser le javascript que l'auteur du script à utiliser..
Au final un jour tu te dis "je voudrais rajouter ça" et puis t'es bon pour aller apprendre l'ajax pour un truc tout bête qui prend 2secondes.
Je dis ça mais bon après ya le défenseur de son script qui va se ramener et me faire la peau mdr !

Chacun ses goùt, moi je préfère être créateur plutôt qu'utilisateur !

dodoCoc

8 janvier 2009 à 17:16:57

Une bonne solution si tu comptes utiliser pas mal de JS / AJAX, c'est d'utiliser un framework javascript, tel jQuery ou Prototype.
Il te permettent très souvent de faire ce que tu veux en quelques lignes. Exemple de ce que tu veux avec prototype :

// on definit la fonction a executer lorsqu'on fait un keyup sur le champ
function update()
{
// on lance une requete ajax
new Ajax.Updater('insc_pseudo', 'page.php', { // qui va mettre a jour insc_pseudo avec ce que retournera la page page.php
parameters: { text: $F('pseudo') } // lorsqu'on lui envoie $_POST['text'] = valeur du champ pseudo
});
}
// on dit d'executer la fonction update a chaque keyup
$('pseudo').observe('keyup', update);

Si t'enlèves les commentaires ca fait... 4 lignes oui oui.
Le tout avec un code très propre, car tu n'as plus le onkeyup dans la balise html, c'est la dernière ligne de mon code qui s'occupe de lier une action à l'événement keyup du champ !

Attonde

8 janvier 2009 à 21:40:10

Avec tout le framework tout lourd derrière (je déconne, ils sont pas mal

).
Perso, je préfère encore faire moi même tant que je peux

. Ça reste lisible, ya pas de raison !

dodoCoc

8 janvier 2009 à 22:32:40

Nan mais t'as raison ils ne sont pas tout léger ! C'est pour ca que j'ai dit que c'était bien seulement si tu t'en servais suffisamment, sinon c'est sortir le marteau pour écraser la mouche.
L'avantage c'est que ca fait vraiment un code très propre au final, et ce sans ce casser la tête. Je sais que je n'ai pas le niveau en javascript pour faire qqch de puissant tout en restant propre ; eux me permettent de le réaliser.

Attonde

8 janvier 2009 à 23:57:17

Perso j'ai le niveau pour faire quelque chose de lisible quoi qu'il arrive alors je me rend pas bien compte: j'utilise jamais ce genre de scripts.
Après on m'a dit que mootools était plutôt du genre poid leg dans sa catégorie..

Mais bon, il ne faut pas se le cacher toutes façons, le sites qui utilisent ce genre de scripts ne les exploitent pas assez..

Yaahhrr

9 janvier 2009 à 0:13:18

Mootools in da place ! j'ai commencé à regarder, c'est assez simple et léger. Plus de getElementById('lol') mais $('lol'). De plus, y'a des FX assez sympa et l'interaction ajax gère. Je m'y connais pas énormément mais ça m'a séduit.

GL pour ton site

Yaahhrr

Attonde

9 janvier 2009 à 12:52:40

Oui ça séduit beaucoup de monde, surtout ceux qui savent pas faire ou ceux qui ont pas envie de se faire chier mais je ne suis pas compté dans ces personnes, même si j'avoue avoir déjà bien fait mumuse avec (et c'est ce qui me fait dire que le script est à la hauteur de sa réputation).

Bref nous ne sommes pas là pour un débat sur le sujet, si tu en veux un vas poster dans la catégorie javascript ou discution informatique !

ocelote

12 janvier 2009 à 0:21:26

Pour en revenir à ce que Attonde a posté en premier, je ne vois pas où mettre le code php qui doit s'executer [b]uniquement[/b] sur un évènement.
Qu'est ce qu'il y a dans xhr.responseText ?
Pour faire une requête sql je dois utiliser ce qu'il y a dans l'input. or comment le récuperer ?
Merci

Attonde

12 janvier 2009 à 0:43:32

xhr.responseText contient ce qu'affiche ton code php (du texte/code pour faire simple).
Le code php tu dois le mettre donc dans une page à part.

Et sinon pour mettre en gras sur ce forum c'est:

<gras>texte</gras>

ocelote

13 janvier 2009 à 14:12:33

Oui mais ou se trouve le lien entre ajax et php ?
Ya bien un moment ou on appelle la fonction php non ?

dodoCoc

13 janvier 2009 à 17:35:28

Quand tu le fais à la main il n'y a plus cette idée d'appeler une "fonction" php. En fait tu appelles une page entière (le 4e argument de la fonction ajax d'attonde), et cette page n'affiche que ce que tu veux, et non une page xhtml entière. Et comme Attonde l'a dit, tu récupères ce que la page a affiché avec xhr.responseText.

Attonde

13 janvier 2009 à 18:45:20

Cf dodoCoc.
Sinon l'appel à php est fait par la ligne suivante dans mon code:

xhr.open("POST", php, true);

Peut-être que ça serait une bonne idée de déplacer ce topic en javascript quand même !

ocelote

13 janvier 2009 à 21:38:07

Je me suis lancé, j'ai bien compri le principe mais pas suffisamment apparemment.

function ajax_verif(input, rendu, transmis, php, variable) {
var xhr = getXMLHttpRequest();
var value = document.getElementById(input);
if(xhr && xhr.readyState != 0) {
xhr.abort();
}
xhr.onreadystatechange = function() 
{
	if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
	{
		document.getElementById(rendu).innerHTML = xhr.responseText;
	}
}
xhr.open("POST", php+"?var="+variable, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(transmis + "=" + value);
}

onblur="ajax_verif('pseudo', 'insc_pseudo', 'verif_pseudo', '/fonctions/ajax/x_verif.php', this.form.pseudo.value)"

<span id="insc_pseudo" style="font-size:small"><? echo $_POST['verif_pseudo']; ?></span>

<?
if(1==1)
{
	$req = mysql_query("SELECT COUNT(pseudo) FROM membre WHERE pseudo='".$_GET['var']."'");
	$rep = mysql_fetch_row($req);
	if($rep[0] >= 1)	echo 'Invalide';
	else	echo 'Valide';
}
?>

ça ne marche pas on est d'accord

?
Je dois pas être loin.

sebi

14 janvier 2009 à 14:01:14

Déplacé vers "Javascript"

Merci Attonde

https://sebastien-tribot.squarespace.com/

Attonde

14 janvier 2009 à 14:18:51

De rien.

Sinon ocelote tu me parais encore bien loin..
Voici le code commenté:

<html>
	<head>
		<title>Page du formulaire</title>
		<!-- On met en place le script ajax -->
		<script type="text/javascript">
		function getXMLHttpRequest() { //fonction qui permet de déclarer xmlhttprequest sur tous les navigateurs
				var xhr = null;
		 
				if(window.XMLHttpRequest || window.ActiveXObject) {
						if(window.ActiveXObject) {
								try {
										xhr = new ActiveXObject("Msxml2.XMLHTTP");
								} catch(e) {
										xhr = new ActiveXObject("Microsoft.XMLHTTP");
								}
						} else {
								xhr = new XMLHttpRequest();
						}
				} else { //On pourrait virer le else, et faire un truc un peu plus compatible, enfin bon.. ça pose aucun soucis
						alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
						return null;
				}
		 
				return xhr;
		}
		function ajax(input, rendu, transmis, php) { //Fonction que tu utilises réellement
			var xhr = getXMLHttpRequest(); //Nouvel objet XMLHttpRequest
			var value = document.getElementById(input); //On récupère le contenu du bouton (on repère le bouton grâce à son id qui est contenu dans la variable "input")
			if(xhr && xhr.readyState != 0) {
				xhr.abort();
			}
			xhr.onreadystatechange = function() { //On gère l'état de la requête (ce code sera exécuté plus tard bien sûr, c'est un évènement)
				if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { //La page php est chargée, on peut afficher
					document.getElementById(rendu).innerHTML = xhr.responseText; //On affiche ce que php renvoie dans le span qu'on a créé (cf code html)
				}
			}
			xhr.open("POST", php, true); //On prépare la requête, on envera les données en POST à php, la variable "php" ici représente le fichier php qui fera la vérification.
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //On défini le header (il faudra aussi le définir dans le fichier php si on veut être rigoureux)
			xhr.send(transmis + "=" + value); //On envoie la requête avec des variables envoyées un peu comme des get, c'est ça qu'on récupèrera avec php
		}
		</script>
	</head>
	<body>
		<form>
			<!-- Le champ -->
			<input id="pseudo" type="text" onblur="ajax_verif('pseudo', 'insc_pseudo', 'verif_pseudo', 'fonctions/ajax/x_verif.php');" />
			<!-- Le fameux span dans lequel on affichera le texte -->
			<span id="insc_pseudo" style="font-size:small;"></span>
		</form>
	</body>
</html>

Et la page php "x_verif.php":

<?php
/*if(1==1)
{
Je mets ça en commentaire parce que je vois vraiment mais alors vraiment pas l'intéret !
*/
//On oublie pas la connexion à MySQL et on enchaine avec la requête
$pseudo = $_POST['verif_pseudo']; //Pourquoi "verif_pseudo" ? C'est ce qu'on a donné dans le html !
	$req = mysql_query("SELECT COUNT(pseudo) FROM membre WHERE pseudo='".$pseudo."'");
		//hors sujet: quand tu mets entre guillemets "" tu peux mettre directement la variable sans les fermer pour les réouvrir
		//hors sujet 2: bizare ta requête mais bon, si elle marche ^^...
	$rep = mysql_fetch_row($req);
	if($rep[0] >= 1)	echo '<span style="color: red;">Invalide</span>';
	else	echo '<span style="color: green;">Valide</span>';
/* } */
?>

Là je peux pas faire mieux

.
(conseil: copie ça dans notepad++ ça sera beaucoup plus lisible

)

ocelote

14 janvier 2009 à 22:05:09

Je suis désolé je n'ai pas tout modifié en copiant tout le code. Ce que j'ai sur mon site est similaire. Enfin il doit pas y avoir grand chose pour que cela fonctionne.
Tous les hébergeurs acceptent ajax ? (olympe network)
Pour faire ma requete j'ai besoin d'une variable, je la transmet donc dans la fonction ajax_verif() de cette maniere :

function ajax_verif(input, rendu, transmis, php, variable) {
var xhr = getXMLHttpRequest();
var value = document.getElementById(input);
if(xhr && xhr.readyState != 0) {
xhr.abort();
}
xhr.onreadystatechange = function() 
{
	if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
	{
		document.getElementById(rendu).innerHTML = xhr.responseText;
	}
}
xhr.open("POST", php+"?var="+variable, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(transmis + "=" + value);
}

onblur="ajax_verif('pseudo', 'insc_pseudo', 'verif_pseudo', 'fonctions/ajax/x_verif.php', this.form.pseudo.value)"

<span id="insc_pseudo" style="font-size:small">Resultat : <? echo $_POST['verif_pseudo']; ?></span>

<?
session_start();
header("Content-Type", "application/x-www-form-urlencoded");
mysql_connect($_SESSION['mysql_adress'], $_SESSION['mysql_login'], $_SESSION['mysql_pass']) ;
mysql_select_db($_SESSION['db_name']);

	$req = mysql_query("SELECT pseudo FROM membre WHERE pseudo='".$_GET['var']."'");
	$rep = mysql_fetch_assoc($req);
	if($rep['pseudo'] >= 1)	echo '<span style="color: red;">Invalide</span>';
	else	echo '<span style="color: green;">Valide</span>';
?>

Je suis pas fou quand même !! j'ai recopié texto...
Mon navigateur me montre meme pas qu'il réfléchie apres avoir taper un pseudo. Ai-je un moyen de vérifier ?
De toute façon requete ou pas il devrait m'afficher un truc valide ou invalide ?
Merci de ton aide. Si tu en as marre je comprendrais

Attonde

14 janvier 2009 à 23:16:16

Te fou pas de moi, je t'ai tout détaillé dans les commentaires, j'y ai passé du temps.
Relis.

Et oui, tous les hébergeurs fonctionnent avec ajax (je ne sais pas ce qu'il en est d'xAjax).

ça crève les yeux que c'est un remake de ma fonction..

ocelote

15 janvier 2009 à 2:33:03

Merci l'erreur venait de NULL au lieu de null. Autant pour moi, sinon le reste était bon...
Merci beaucoup !