Ajax-XmlHttpRequest-Javascript

Fermé
webdev098 Messages postés 1 Date d'inscription vendredi 5 juin 2015 Statut Membre Dernière intervention 5 juin 2015 - 5 juin 2015 à 12:58
Bonjour a tous...J'ai un problème avec mon code...
Mon Objectif c'est d'afficher dans un tableau la liste de toutes les produits d'une catégories.
L'affichage doit se faire lors d'un choix dans une liste de catégorie"<select></select>".
J'ai trois fichiers: categorie.php(le fichier principale) , affichage.js(le fichier inclus javas-script) , XMLHttpRequest_getListData.php(le fichier qui effectuera la requête) .
Je vous pris de regarder mon code et d'essayer de m'aider si possible.Je n'arrive pas a générer un tableau contenant la liste des produits
cordialement...
  • categorie.php

<?php
	session_start();
	$hote="localhost";
	$login="root";
	$m_d_p="";
	$bdd="bd_produit";		
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
</head>
<script type="text/javascript" src="affichage.js"></script>
<body>
<fieldset>
	<legend>Programm</legend>
<div id="programBox">
	<p id="editors">
		<select id="editorsSelect" onChange="request(this);">
			<option value="none">Selection</option>
			<?php		
					
				mysql_connect($hote, $login, $m_d_p);
				mysql_select_db($bdd);
				
				$query = mysql_query("SELECT * FROM categorie ");
				while ($back = mysql_fetch_assoc($query)) {
					echo "\t\t\t\t<option value=\"" . $back["id"] . "\">" . $back["nom"] . "</option>\n";
				}
			?>			
		</select>
	
	<div id="champ">
    	
    </div>
</div>
</fieldset>
</body>
</html>
  • affichage.js

function getXMLHttpRequest() {
	var 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(oSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr   = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
	
	xhr.open("POST", "XMLHttpRequest_getListData.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("IdCategorie=" + value);
}

function readData(oData) {
//je ne sais pas comment generer le tableau,ici j'ai ecrit n'importe quoi
	var code='<table>';
	code +=<tr><td></td>
	code +=</tr>
	code +='</table>';
	document.getElementById("champ");
}

  • XMLHttpRequest_getListData.php

<?php
session_start();
	$hote="localhost";
	$login="root";
	$m_d_p="";
	$bdd="bd_produit";
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<list>";

$idEditor = (isset($_POST["IdCategorie"])) ? htmlentities($_POST["IdCategorie"]) : NULL;
if ($idEditor) {
	mysql_connect($hote, $login, $m_d_p);
	mysql_select_db($bdd);
	
	$query = mysql_query("SELECT * FROM produit WHERE id_categorie='" . mysql_real_escape_string($idEditor) . "' ");
	while ($back = mysql_fetch_assoc($query)) {
		echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["designation"] . "\" />";
	}
}

echo "</list>";

?>