ajax pas de réponse coté serveur

**live-linux** · 14/06/2010, 20h06

Bonjour,
dans le but de faire un formulaire de contacte je me suis lancé dans l'ajax.
Le souci c'est une fois que ma fonction est lancé je ne reçois pas de réponse du serveur j'ai un jolis Aborted.
Donc le requête est bien envoyer mais c'est la réponse qui merde.

Sauf quand je mes un "alert("test");" apres "xhr.send(data);"

Voila le 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
function getXMLHttpRequest() {
	xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}
 
function request(callback) {
 
	 nom = document.getElementById("nom").value;
	 prenom = document.getElementById("prenom").value;
	 email = document.getElementById("email").value;
	 site = document.getElementById("site").value;
	 sujet = document.getElementById("sujet").value;
	 texte = document.getElementById("texte").value;
	 verif = document.getElementById("verif").value;
 
	xhr = getXMLHttpRequest();
 
 
	data = 'nom='+escape(nom);
xhr.open("POST", "http://beta.live-linux.fr.nf/site/templates/mail.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");       
xhr.send(data);
 
xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
			document.getElementById("loed").style.display = "none";
			document.getElementById("mail").style.display = "inline";
 
		} else if (xhr.readyState < 4) {
			document.getElementById("loed").style.display = "inline";
			document.getElementById("mail").style.display = "none";
		}
		else if (xhr.status == 500 ) {
			document.getElementById("loed").style.display = "none";
			document.getElementById("mail").style.display = "inline";
		}
	};
}
 
function readData(sData) {
 
alert(sData);
}

La page en 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<div id="right">
<div id="mail" >
 
<form method="post" >
<br />
	<fieldset class="connection">
	<legend>.: Mail :.</legend>
	<br />
		<table class="tableau">
			<tr>
				<td><p>Nom : </p></td>
				<td><input type="text" id="nom" /></td>
				<td><em>ereur</em></td> 
			</tr> 
			<tr>
				<td><p>Prénom : </p></td>
				<td><input type="text" id="prenom" /></td>
				<td><em>ereur</em></td>
			</tr>
			<tr>
				<td><p>E-mail : </p></td>
				<td><input type="text" id="email" /></td>
				<td><em>ereur</em></td>
			</tr>
			<tr>
				<td><p>Site internet ( facultatif ) : </p></td>
				<td><input type="text" id="site" value="http://" /></td>
			</tr>
			<tr>
				<td> <p>Sujet : </p></td>
				<td> <input type="text" id="sujet" /></td>
				<td><em>ereur</em></td>
			</tr>
		</table>
 
		<br />
			<textarea name="texte" id="texte">Taper votre texte</textarea>
	<br />
	</fieldset>
	<br/>
	<fieldset class="connection">
	<legend>.: Traitement :.</legend>
	<br />
		<center>
			<a onclick=""><img  id="image" src="http://beta.live-linux.fr.nf/site/libs/captcha/captcha.php" alt="image de protection"  /></a><br />
			<p>recopier les chifres : <input type="text" id="verif" size="10" maxlength="5" /><em> ereur</em></p>
			<p><button onclick="request(readData);">GO</button></p>
		</center>
	<br />
	</fieldset>
 
</form>
 
</div>
<div id="loed" style="display: none;">
<br/><br/><br/><br/>
<center>
<img  src="http://beta.live-linux.fr.nf/site/ajax.gif" alt="chargement"  />
<p>Envoy du mail en cours</p>
</center>
</div>
 
<div id="reusii" style="display: none;">
<br/><br/><br/><br/>
<center>
<h1>Envoy reussi</h1>
</center>
</div>
</div>

Le code php qui reçois la réponse :

Code :

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

1
2
3
4
 
<?php
        echo $_POST['nom'];
?>

Pour ceux que ça peut aider ici l'adresse du formulaire : http://beta.live-linux.fr.nf/site/contact

Un grand merci de votre aide.

**SpaceFrog** · 14/06/2010, 20h19

Code :

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

callback(xhr.responseText);

? elle est ou la fonction callback ?

**live-linux** · 14/06/2010, 20h21

elle est la

Code :

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

1
2
3
4
function readData(sData) {
 
alert(sData);
}

**dukej** · 14/06/2010, 21h13

Envoyé par live-linux

elle est la

Code :

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

1
2
3
4
function readData(sData) {
 
alert(sData);
}

tu peux regarder avec firebug les traces de tes requetes ajax dans l'onglet console.

Il est primordiale pour toi d'utiliser de bon outils pour bosser comme firebug. C'est le minimum syndical

**SpaceFrog** · 14/06/2010, 21h20

ben un truc m'echappe ...

elle s'appelle readData() pas callback()

Code :

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

1
2
3
4
5
6
xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                       alert(xhr.responseText)
			readData(xhr.responseText);
			document.getElementById("loed").style.display = "none";
			document.getElementById("mail").style.display = "inline";

il te retourne quoi là ?

**dukej** · 14/06/2010, 21h31

Envoyé par SpaceFrog

ben un truc m'echappe ...

elle s'appelle readData() pas callback()

Code :

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

1
2
3
4
5
6
xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                       alert(xhr.responseText)
			readData(xhr.responseText);
			document.getElementById("loed").style.display = "none";
			document.getElementById("mail").style.display = "inline";

il te retourne quoi là ?

regarde bien le code HTML, il fait un request(readdata), donc son code est correct.

mais reste à voir ce qu'il recoit

**SpaceFrog** · 14/06/2010, 22h53

oui ok pour le request ...
la requete est bien lancée ...
mais je ne vois rein sur le retour hormis l'appel à une fonction callback que je ne vois nulle part

**live-linux** · 14/06/2010, 22h53

merci de votre aide,
avec firebug j'ai un Aborted sur la requête post.

Edit :

En regardant les requête qui son fait je voyait 2 POST,

dans le fichier html il y a '<form method="post" >'.

J'ai retirai le ' method="post" '.

Mais sa ne resoud rien je n'ai toujours pas de réponse.

**live-linux** · 14/06/2010, 23h28

2 grosse erreur sont la, ce n'était pas dans le js mais dans le code html.

Alors la premier :

Code :

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

<form method="post" >

que j'ai remplacé par :

Code :

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

<form>

Et la deuxième :

Code :

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

<p><button onclick="request(readData);">GO</button></p>

que j'ai remplacé par :

Code :

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

<p><input type="button" onclick="request(readData);" value="GO" /></p>

Un grand merci à vous 2 d'avoir pris le temps de regarder au code.

**SpaceFrog** · 15/06/2010, 08h27

le

Code :

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

le method="post"

n'est certainement pas une grosse erreur, au contraire c'est contraire au w3c de ne pas mettre d'attribut method ni action ni d'ailleurs nalme à ton form. Ils ne servent à rien dans le cas de ton ajax mais ne sont pas bloquants.
Je n'ai toujours pas compris comment tu appelais ta fonction callback qui n'existe pas ...
il n'y a aucune raison que le onclick de la balise button ne puisse pas lancer ton ajax ...
Ce sont là a mon avis de faux problèmes qui n'étaient à mon avis pas la cause de ton blocage

**dukej** · 15/06/2010, 08h46

Envoyé par SpaceFrog

le

Code :

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

le method="post"

n'est certainement pas une grosse erreur, au contraire c'est contraire au w3c de ne pas mettre d'attribut method ni action ni d'ailleurs nalme à ton form. Ils ne servent à rien dans le cas de ton ajax mais ne sont pas bloquants.
Je n'ai toujours pas compris comment tu appelais ta fonction callback qui n'existe pas ...
il n'y a aucune raison que le onclick de la balise button ne puisse pas lancer ton ajax ...
Ce sont là a mon avis de faux problèmes qui n'étaient à mon avis pas la cause de ton blocage

Super il nous manquait l'essentiel, le <button> par défaut est un submit, donc avoir un form et faire de l'ajax derrière c'est pas utile, quand tu cliquais sur le bouton, tu ne t'en rendait pas du tout compte mais tu lancais ta requete ajax et tu envoyais le formulaire, ce qui rechargeait ta page.

Donc fallait bien regarder autour

**SpaceFrog** · 15/06/2010, 09h02

ha button agit comme un submit ? je le savais pour une type image ...

il suffisait alors de rajouter un

Code :

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

onsubmit="return false;"

dasn la balise form.

Mais ceci ne me dit toujours pas comment la fonction callback est lancée

???

Code :

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

1
2
3
4
<form action="javascript: alert('formuliare soumis')" method="post">
<input type="text" value="" />
<input type="button" value="go" />
</form>

mon input button ne fait pas office de submit ...

ajax pas de réponse coté serveur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager