[AJAX] Formulaire : POST

**frizou11** · 18/05/2008, 16h24

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

Je précise que ma fonction JavaScript est bien appelée.

Voilà le code de la page contenant le formulaire :

Code :

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

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 :

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

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

1
2
3
4
 
<?php
        echo "test !";
?>

NB : débutant en AJAX, est-ce ici une bonne utilisation ?

**frizou11** · 18/05/2008, 17h16

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 ?

**4R416N33** · 18/05/2008, 17h30

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 :

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

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

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

**frizou11** · 18/05/2008, 18h06

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

Merci.

**4R416N33** · 18/05/2008, 18h22

Mais derien

[AJAX] Formulaire : POST

JavaScript

Vue hybride

Discussions similaires

Partager

Partager