[AJAX] Formulaire : POST

Version imprimable

Bonjour, je me mets tout juste à AJAX et je suis les tutos de developpez.com (merci d'ailleurs).

Dans mon cas je crée un formulaire à deux champs texte (pseudo et message), et je souhaite qu'à la validation, une fonction JavaScript envoie les données à une page .php (qui fera des requetes SQL plus tard) en mode POST. En retour de réponse du serveur j'affiche les données envoyées à la page .php dans une boite de dialogue.

Mais pas de boite de dialogue qui s'affiche 8O
Je précise que ma fonction JavaScript est bien appelée.

Voilà le code de la page contenant le formulaire :
Code:

1 2 3 4 5 6 7 8 <form method="post" onsubmit="checkPostLivreDor()" action=""> <p>Pseudo</p><br /> <input name="pseudo" id="id_pseudo" type="text" /><br /><br /> <p>Message</p><br /> <textarea rows="5" cols="70" name="message" id="id_message" type="text"></textarea><br /><br /> <input type="submit" value="Poster" /> </form>
Celui de ma fonction JavaScript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function checkPostLivreDor() { var xhr = getXhr(); var pseudo = document.getElementById('id_pseudo'); var message = document.getElementById('id_message'); // Fonction de retour de 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){ alert(xhr.responseText); } } // Appel asynchrone xhr.open("POST", "/site/requetes/ajoutlivredor.php", true); xhr.send("pseudo=" + pseudo.value + "&message=" + message.value); return false; }
Et enfin celui de la page ajoutlivredor.php qui fera plus tard des requetes SQL :
Code:

1 2 3 4 <?php echo "test !"; ?>
NB : débutant en AJAX, est-ce ici une bonne utilisation ?

18/05/2008, 17h16
frizou11

Petite info supplémentaire :
J'ai utilisé la méthode GET et ça marche mais seulement sous IE... pas sous Firefox :?

Quelqu'un a une solution ?

En se calquant sur un cours developpez.com, on obtient le code suivant.

Je ne saurai te dire pourquoi il y a un pb avec le onsubmit sur le form, mais vu que ton form est géré par ajax, autant ne pas faire de form

Pour ton html

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<title>Exemple 4</title>
 
	<script>
function checkPostLivreDor()
{
    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 reponse.txt
    xhr.open("GET", "reponse.php", true);
    xhr.send("pseudo=" + document.getElementById("id_pseudo").value + "&message=" + document.getElementById("id_message").value);
}
 
function alert_ajax(xhr)
{
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("donnee")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		alert (items.item(i).firstChild.data);
	}
}
	</script>
</head>
<body>
<p>Pseudo</p><br />
<input name="pseudo" id="id_pseudo" type="text" /><br /><br />
<p>Message</p><br />
<textarea rows="5" cols="70" name="message" id="id_message" type="text"></textarea><br /><br />
<input type="button" value="Poster" onClick="checkPostLivreDor()" />
</form>
 
</body>
</html>

Pour ton php

Code:

1
2
3
4
5
6
7
8
9
 
<?php
header('Content-Type: text/xml'); 
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
        echo "<donnee>Test !</donnee>\n";
echo "</exemple>\n";
 
?>

18/05/2008, 18h06
frizou11

En effet c'est le <form> qui posait problème.
En le supprimant, cela marche.

Merci.
18/05/2008, 18h22
4R416N33

Mais derien