Discussion :

[medessad]

Bonjour, j'aimerai avoir un script en ajax, qui écrira le résultat d'un echo depuis un fichier php dans une div, merci

[bmartin]

Bonjour,

Un article te l'explique très bien ici : http://siddh.developpez.com/articles/ajax/

il te faudra juste changer ça :

Code javascript :

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

1
2
3
4
 
if(xhr.readyState == 4 && xhr.status == 200){
	alert(xhr.responseText);
}

par

Code javascript :

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

1
2
3
4
 
if(xhr.readyState == 4 && xhr.status == 200){
	document.getElementById("monDiv").innerHTML=(xhr.responseText);
}

[medessad]

J'ai beau essayé, mais aucun résultat , le code n'arrive pas à entrer dans la condition if

[bmartin]

tu peux poster ton code ?

[NoSmoking]

Bonjour,
si tu testes en local, sans serveur local, il te faut mettre

Code :

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

if( xhr.readyState == 4 && ( xhr.status == 0 || xhr.status == 200)){

[medessad]

tu peux poster ton code ?

Ci joint, un fichier .js en complet, il a pour but de faire 2 opérations, la première c'est d'insérer la valeur d'un champs dans une base de données, ce qui se passe sans aucun problème, mais la deuxième partie, de la mise à jour du contenu du span en question, c'est là ou se passe le problème, je vais vous rajouter les fichiers 'majlivre.php' et 'printlivre.php'


"auteur.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
 
// JavaScript Document	 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go1(){
				var xhr =getXhr();
				var xhr_object =null;
				// On défini ce qu'on va faire quand on aura la 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){
					leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","majlivre.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				nom = document.getElementById("auteurtxt").value;
				xhr.send("nom="+nom);
				document.getElementById("autreaut").style.display="none";
				document.getElementById("auteurtxt").value="";
				var a = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				a.open("GET","printlivre.php",true);
				a.send(null);
				a.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(a.readyState == 4 && a.status == 200){
						alert('réponse ;)');
						document.getElementById("aut").innerHTML = (a.responseText);
					}
				}
		}

"majlivre.php"

/*cette partie marche bien */

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
<?php
	$con = mysql_connect("localhost","root","");
	$db = mysql_select_db("gestion_bib");
	$maj = "insert into auteur values(NULL,'".$_POST['nom']."')";
	$m_a_j = mysql_query($maj);
	$sql = "select * from auteur";
	$req = mysql_query($sql);
?>

"printlivre.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
 
<?php
	$con = mysql_connect("localhost","root","");
	$db = mysql_select_db("gestion_bib",$con);
	$sql = "select * from auteur";
	$req = mysql_query($sql);
while($res=mysql_fetch_assoc($req)){
		echo"
			<option value=".$res['id'].">".utf8_encode($res['nom'])."</option>
 
		";
	}
	echo "<option value=\"Autre\">Autre</option>";
?>

et c'est la partie du code html concernée par le script

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
 
 
 
<label for="auteur">Auteur :</label>
<br />
<select name="auteur" id="auteur" onchange="changementTypeAut();">
<span id="aut">
<?php
	$con = mysql_connect("localhost","root","");
	$db = mysql_select_db("gestion_bib");
	$sql = "select * from auteur";
	$req = mysql_query($sql);
	while($res=mysql_fetch_assoc($req)){
		echo"
			<option value=".$res['id'].">".utf8_encode($res['nom'])."</option>
 
		";
	}
?>
</span>
<option value="Autre">Autre</option>
</select>
<div id="autreaut" style="display:none"><input type="text" id="auteurtxt"/><input type="button" value="Ajouter" class="boutonform" onclick="go1();"/></div><br />

[bmartin]

Bonjour tu récupère la réponse de ta requête ajax mais tu n'en fait rien :

Code javascript :

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

1
2
3
4
5
6
7
8
 
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){
		leselect = xhr.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
	}
}