Poster un commentaire ou une réponse
Exerice AJAX et base de donnée
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
Nous avons une liste déroulante et en sélectionnant 'homme' ou 'femme' une autre liste s'affiche contenant pantalon et costume pour homme | jupe et robe femme. en sélectionnant un vetement une autre liste s'affiche contenant le type de vetement. en selectionnat le type un tableau s'affiche avec les détails du vetement : libellé prix et marque.
Commencon par créer les tables:
categorie
produit
souscateg
comme suit:
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
Publicité
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
le résultat final doit ressembler a ca:
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
nous aurons besoin de 5 fichier php:
connexion.php:
<?php
function connexion()
{
$server= '127.0.0.1';
$user='root';
$pwd='';
$db='basedonn';
$con= mysql_connect($server, $user, $pwd);
mysql_select_db($db, $con);
}
?>
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
page d'accueil 1.php code:
<html>
<head>
<script language="javascript">
function rech3()
{
xhr=new XMLHttpRequest(); <!-- instancier lobjet c lintermediere entre la page web et lotre page se trouvan ds le serveur. !>
xhr.onreadystatechange=function() //fonction execute apres la recpe
{
if(xhr.status==200) // test si le fichier exisite au nivo du serveur
{
if(xhr.readyState==4) // evite dafficher 4 fois
document.getElementById('tab').innerHTML=xhr.responseText;
val=document.getElementById('selec').value=""; // mettre input de com vide apres avoir poster un comm
val=document.getElementById('selec2').value=""; // mettre input de com vide apres avoir poster un comm
val=document.getElementById('tab').value=""; // mettre input de com vide apres avoir poster un comm
//alert (xhr.responseText);
}
};
x= document.getElementById('selection3').value ;
xhr.open('GET','rech3.php?val='+x,true); // appelle la fction dessus
xhr.send();
}
function rech2()
{xhr=new XMLHttpRequest(); <!-- instancier lobjet c lintermediere entre la page web et lotre page se trouvan ds le serveur. !>
xhr.onreadystatechange=function() //fonction execute apres la recpe
{
if(xhr.status==200) // test si le fichier exisite au nivo du serveur
{
if(xhr.readyState==4) // evite dafficher 4 fois
document.getElementById('selec2').innerHTML=xhr.responseText;
val=document.getElementById('selec').value=""; // mettre input de com vide apres avoir poster un comm
val=document.getElementById('selec2').value=""; // mettre input de com vide apres avoir poster un comm
val=document.getElementById('tab').value=""; // mettre input de com vide apres avoir poster un comm//alert (xhr.responseText);
}};
x= document.getElementById('selection2').value ;
xhr.open('GET','rech2.php?val='+x,true); // appelle la fction dessus
xhr.send();
}
function recherche()
{
xhr=new XMLHttpRequest(); <!-- instancier lobjet c lintermediere entre la page web et lotre page se trouvan ds le serveur. !>
xhr.onreadystatechange=function() //fonction execute apres la recpe
{
if(xhr.status==200) // test si le fichier exisite au nivo du serveur
{
if(xhr.readyState==4) // evite dafficher 4 fois
document.getElementById('selec').innerHTML=xhr.responseText;
val=document.getElementById('selec').value=""; // mettre input de com vide apres avoir poster un comm
val=document.getElementById('selec2').value=""; // mettre input de com vide apres avoir poster un comm
val=document.getElementById('tab').value=""; // mettre input de com vide apres avoir poster un comm
//alert (xhr.responseText);
}
};
x= document.getElementById('selection').value ;
xhr.open('GET','rech.php?val='+x,true); // appelle la fction dessus
xhr.send();
}
</script>
</head>
<body>
<form name="f">
<select id="selection" onchange="recherche()">
<option></option>
<option>Homme</option>
<option>Femme</option>
</select>
<div id="selec">
</div>
<div id="selec2">
</div>
<div id="tab">
</div>
</form>
</body>
</html>
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
3 fichier php de recherche:
rech.php
<?php
require "connexion.php";
connexion();
$sexe=$_GET['val'];
$requete="select * from categorie where sex='$sexe'";
$data=mysql_query($requete) or die (mysql_error());
echo "<select id='selection2' onchange='rech2()'>";
echo "<option></option>" ;
while($row=mysql_fetch_array($data))
{
echo "<option>".$row['lib']."</option>" ;
}
echo "</select>";
?>
</body>
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
rech2.php
<?php
require "connexion.php";
connexion();
$val=$_GET['val'];
$requete="select id,lib from categorie where lib='$val'";
$data=mysql_query($requete) or die (mysql_error());
while($row=mysql_fetch_array($data))
{
$requete2="select * from souscateg where idcateg='$row[0]'";
$data2=mysql_query($requete2) or die (mysql_error());
echo "<select id='selection3' onchange='rech3()' >";
echo "<option></option>" ;
while($row2=mysql_fetch_array($data2))
{
echo "<option>".$row2['lib']."</option>" ;
}
echo "</select>";
}
?>
Publicité
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
rech3.php
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
<?php
require "connexion.php";
connexion();
$val=$_GET['val'];
$requete="select id,lib from souscateg where lib='$val'";
$data=mysql_query($requete) or die (mysql_error());
while($row=mysql_fetch_array($data))
{
$requete2="select * from produit where idsscateg='$row[0]'";
$data2=mysql_query($requete2) or die (mysql_error());
echo "
<table border=1><tr><td>Libellé</td><td>Marque</td><td>Prix en DT</td></tr>";
while($row2=mysql_fetch_array($data2))
{
echo "<tr><td>".$row['lib']."</td><td>".$row2['lib']."</td><td>".$row2['prix']."</td>" ;
}
echo "</table>";
}
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
voici tout le dossier;
Hafedh :
nb posts:89
nb discussions:29
inscrit le :09-02-2015
fabrice :
nb posts:60
nb discussions:11
inscrit le :08-12-2014
Merci pour l'explication
