Problème ajax

Fonction XMLHttpRequest qui ne fonctionne pas

Sujet résolu

4 janvier 2009 à 2:09:59

Bonjour,
je suis face à un problème que je ne comprends vraiment pas. Je vais donc vous expliquer, mais avant tout voilà mon code :

code HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajout de donné</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body onLoad="zero();">
<form name="f" onSubmit="ajout(this.form,'texte');">
<label>Pseudo</label> <input type="text" name="pseudo" onFocus="fonct('login');" onBlur="zero();" /> <span id="login">Ici vous devez marquer votre pseudo</span><br />
<label>Mdp</label> <input type="password" name="mdp" onFocus="fonct('pass');" onBlur="zero();" /> <span id="pass">Ici vous marquez votre password</span></body><br/><br />
<input type="submit" name="Ajouter" value="Ajouter" /><br /><br />
</form>

<span id="texte"></span>
</html>

Voilà ensuite mon code javascript se trouvant dans la même page entre <head> et </head> :

<script type="text/javascript">
//<![[CDATA
function zero()
{
	document.getElementById('login').style.display="none";
	document.getElementById('pass').style.display="none";
}
function fonct(id)
{
	document.getElementById(id).style.display="inline";
}
function ajout(formu,id)
{
	var pseudo=document.f.pseudo.value;
	var mdp=document.f.mdp.value;
	alert("pseudo="+pseudo+" mdp="+mdp);
	var xhr;
	if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
	else if(window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
	else{
	 alert("Votre navigateur n'accepte pas ajax");
	 return;
	}
	xhr.open('POST','page.php',true);
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4)
		{
			document.getElementById(id).innerHTML = xhr.responseText;
		}
	}
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	var data="pseudo="+pseudo+"&mdp="+mdp);
	xhr.send(data);
}

//]]>
</script>

Et pour finir voici mon code php se trouvant dans la page appelé "page.php" se trouvant dans le même dossier :

<?php
header('Content-type: text/html; charset=iso-8859-1');
mysql_connect('localhost', 'root', '');
mysql_select_db('test');
mysql_query('INSERT INTO ajax VALUES("", "'.$_POST['pseudo'].'", "'.$_POST['mdp'].'")')or die(mysql_error());
mysql_close();
$text='Données bien ajouté';
echo $text;
?>

Voilà, donc mes problèmes sont les suivants :

Le 1er : Depuis que j'ai taper le fonction ajout(); dans ma page HTML les autres fonctions ne marchent plus alors qu'elle marchaient avant et je ne comprends pas pourquoi.

Le second : Quand j'envoie mon document rien ne se passe, rien ne s'écrit et la base de donnée reste vide rien ne s'ajoute dedans et je ne comprends pas pourquoi :(.

Je vous demande donc votre aide, je compte sur vous merci d'avance.

Nesk

4 janvier 2009 à 12:48:14

Quand tu lances ta requête est-ce que le xhr.readyState atteint bien la 4ème étape ? Et le statut de la requête renvoi quoi (utilise xhr.status) ?

T3nS

4 janvier 2009 à 12:59:39

Eh bien je ne sais pas, mais je crois bien que la requête ne se lance même pas car même le alert("pseudo="+pseudo+" mdp="+mdp); ne se passe pas, donc je crois que c'est la fonction complète qui marche pas :/ mais pourquoi ?

Nesk

4 janvier 2009 à 13:37:55

Citation : T3nS

Eh bien je ne sais pas

Ben tu essayes >_<

. Tu fous un alert(xhr.readyState); dans ta fonction onreadystatechange (mais surtout pas dans le if !), tu regardes ce que ça donne et tu me donnes les résultats.

T3nS

4 janvier 2009 à 14:30:09

J'ai essayé, mais rien ne se passe, absolument rien, même pas le premier alert, c'est bizarre :

xhr.onreadystatechange function() {
		alert(xhr.readyState);
		if(xhr.ReadyState==4)
		{
			document.getElementById('id').innerHTML=xhr.responseText;
		}
	}

Voilà la fonction modifié comme tu me l'as demandé. En tout cas aucune fenêtre n'apparait, c'est à croire que le javascript ne fonctionne plus en fait.

Nesk

4 janvier 2009 à 14:39:34

As-tu des erreurs qui s'affichent dans la console (Ctrl+Maj+J sous Firefox) ?

T3nS

4 janvier 2009 à 14:56:53

Oui j'ai énormément d'erreur, mais je ne les comprends pas ! Je vais te mettre les pages en ligne comme ça tu pourras voir et tester

:

Clique ici

Merci d'avance !

Nesk

4 janvier 2009 à 15:25:20

T'as même pas besoin de comprendre, si tu sais coder tu sais résoudre les erreurs ! Rien qu'en arrivant sur ta page (donc sans toucher à quoi que ce soit) j'ai deux erreurs dont l'une qui me met ceci :

Citation : Firefox

Erreur : missing ; before statement
Fichier Source : http://t3ns.free.fr/Ajout%20donn%e9/index2.html
Ligne : 41, Colonne : 35
Code Source :
var data="pseudo="+pseudo+"&mdp="+mdp);

Si tu lis ta ligne de code tu vois bien que tu as ajouté une parenthèse en trop...

Et quand il est écrit "... is not defined" ça veut dire que tu as mal défini ta fonction ou ta variable. Bref, cherche un peu, il faut déjà que tu rectifies tes erreurs d'initialisation sinon c'est clair que tous tes codes vont foirer.

T3nS

4 janvier 2009 à 15:43:16

Avec la modification que tu m'as donné ça marche, par contre quand je retire les alerts ça ne marche plus et je ne comprends pas pourquoi.
mais essai déjà comme çà et dis moi quand c'est fait stp

:

clique ici

donc j'ai juste enlevé la parenthèse que tu m'as indiqué ^^.

Nesk

4 janvier 2009 à 15:51:14

À priori ça fonctionne très bien, par contre tu n'as pas pensé à bloquer l'envoi du formulaire, ce qui fait qu'une fois que la requête Ajax est effectuée, la page se recharge. Pour remédier à ça il faut que tu ajoutes à un return false; à la fin de ta fonction ajout() et que tu modifies l'attribut onsubmit de ton formulaire de cette façon : onsubmit="return ajout('texte');"

Et ne mets pas de majuscule sur tes attributs, tout doit rester en minuscule.

T3nS

4 janvier 2009 à 15:56:58

Ca fonctionne, merci beaucoup, merci.

Bonne journée à toi et merci encore

Nesk

4 janvier 2009 à 15:59:18

De rien

Problème ajax

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème ajax

Fonction XMLHttpRequest qui ne fonctionne pas

Problème ajax

Supprimer

Modérer

Signaler le message aux modérateurs