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

**wallash** · 01/06/2009, 14h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
}

**wallash** · 01/06/2009, 19h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}
 
?>

**andry.aime** · 02/06/2009, 07h45

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

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
}

**wallash** · 02/06/2009, 11h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
}
?>

**andry.aime** · 02/06/2009, 12h23

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 JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
}

**wallash** · 02/06/2009, 13h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
}

**andry.aime** · 02/06/2009, 13h20

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

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

AJAX

Discussions similaires

Partager

Partager