[AJAX] fonction ajax qui transmet les données du formulaire vers un fichier php

Version imprimable

bonjour à tous, s'il vous plait aidez moi !
en fait j'ai un formulaire qui comporte un seul champs de type text et je voudrais vérifier si l'information entrée dans le champs est présent dans la base de données et afficher un message; comment je doit proceder ? je ne sais pas comment adapter la fonction envoie() ci dessous.

voici le fichier html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<title>Exemple 4</title>
</head>
<body>
 
<script type="text/javascript" src="ajax.js"></script>
 
<form name="formulaire" action="" method="post"><input name="pseudos" type="text" id="pseudo">
<input name="verif_pseudo" type="button" id="verif_pseudo" value="verifier" onClick="javascript:ajax();">
</form>
 
</body>
</html>

voici la fonction javascript à adapter

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function envoie()
{
 
 
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    //on appelle le fichier verif.php
    xhr.open("GET", "verif.php", true);
    xhr.send(null);
 
}

j'ai un peu évoluer mais lorsque je clique sur le bouton il ya une erreur signalée au bas de la page, voici le contenu de mon fichier javascript.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function ajax()
{
 
 
    var xhr=null;
    var pseudo=document.getElementById('pseudo').value;
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    //on appelle le fichier reponse.php
    xhr.open("POST", "reponse.php?pseudo="+pseudo, true);
    xhr.send(null);
 
}
function alert_ajax(xhr)
{
	if(xhr.readyState == 4 && xhr.status == 200)
	{
	   var resultat = xhr.responseText;
	   alert(resultat);
	}
 
}

et voici le fichier php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<?php
 
//on connecte a la BDD
$pseudo=$_POST['pseudo'];
 
$dblink=mysql_connect("localhost","root","");
mysql_select_db("test",$dblink);
 
//on lance la requete
$query = "SELECT * FROM connexion where pseudo='$pseudo' ";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
 
//on affecte le resultat dans $row
$row=mysql_fetch_array($result);
 
//on verifie si le pseudo est dispo, si non on propose un pseudo
if($row)
{
  echo 'votre pseudo est : '.$row['pseudo'];
}
else
{
  echo 'pseudo inexistant nous vous proposons de prendre bruce comme pseudo';
}
 
?>

Salut, tu confonds la façon d'envoyer des données avec POST et GET.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax()
{
    var xhr=null;
    var pseudo=document.getElementById('pseudo').value;
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    xhr.open("POST", "reponse.php", true);
    xhr.send("pseudo="+pseudo);
 
}

salut andry et merci de me repondre.

bon voilà j'ai modifier comme indiqué dans ton post mais je ne reçois toujours pas le texte entré dans le formulaire par la methode POST au niveau de mon fichier php mais je reçois le texte retourné par le fichier php me disant que la valeur envoyée par post n'est pas reçue. S'il te plait tu peux encore m'aider ?

voici code JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function ajax()
{
    var xhr=null;
    var pseudo=document.getElementById('pseudo').value;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    xhr.open("POST", "verif.php?", true);
    xhr.send("pseudo="+pseudo);
 
}
function alert_ajax(xhr)
{
	if(xhr.readyState == 4 && xhr.status == 200)
	{
	   	   alert(xhr.responseText);
	}
 
}

voici code PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<?php
if(isset($_POST['pseudo']))
{
  $pseudo=$_POST['pseudo'];
 
//on connecte a la BDD
 
$dblink=mysql_connect("localhost","root","");
mysql_select_db("test",$dblink);
 
//on lance la requete
$query = "SELECT * FROM connexion where pseudo='$pseudo' ";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
 
//on affecte le resultat dans $row
$row=mysql_fetch_array($result);
 
//on verifie si le pseudo est dispo, si non on propose un pseudo
     if($row)
    {
      echo 'votre pseudo est : '.$row['pseudo'];
    }
    else
    {
      echo 'pseudo inexistant nous vous proposons de prendre bruce comme pseudo';
    }
  mysql_close();
}
else
{
 echo'pseudo non defini'."\n";
}
?>

Citation:

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

Vire le '?' et ajoute xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded") pour la méthode POST.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ajax()
{
    var xhr=null;
    var pseudo=document.getElementById('pseudo').value;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() { alert_ajax(xhr); }
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //Pour la methode post
    xhr.open("POST", "verif.php", true);
    xhr.send("pseudo="+pseudo);
 
}

andry je viens de modifier comme indiqué et maintenant j'ai une erreur en bas du navigateur et plus de retour du texte retourné par la page php, comment faire ?

code JS Modifié

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function ajax()
{
    var xhr=null;
    var pseudo=document.getElementById('pseudo').value;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.open("POST", "verif.php", true);
    xhr.send("pseudo="+pseudo);
 
}

02/06/2009, 13h20
andry.aime

Installe Firebug et décrit l'erreur retourné.