Récupérer et afficher données avec JS et JSON
Bonjour à tous :)
Je suis actuellement en stage et je travail sur un petit projet de gestion de stock. Je dois utiliser JavaScript et JSON pour récupérer des valeurs d'un formulaire les insérer dans ma bdd et les afficher sur ma page sous forme d'un tableau (sans avoir besoin de tout rafraîchir). Cependant je bloque sur le code , n'ayant pas beaucoup vu JS je suis un peu perdu et je ne comprend pas bien le fonctionnement. Un bout de code m'a était donner pour m'aider a commencer.
Code:
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
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var nomproduit=$("#nomproduit").val();
var quantite=$("#quantite").val();
var famille=$("#famille option:selected").val();
var datas ={"#nomproduit": nomproduit,"#quantite":quantite,"#1":1,"#2":2,"#3":3,"POST": POST};
// Envoi de la requête HTTP en mode asynchrone
$(".#monform").(function(e) {
e.preventDefault();
// Envoi de la requête HTTP en mode asynchrone
$.ajax({
url: "index.php",
type: "POST",
dataType:'json',
data: datas,
success: function(json) {
if(json.reponse == 'ok') {
$("#monform").append(json);
alert('Tout est bon');
} else {
alert('Erreur : '+ json.reponse);
}
}
});
});
</script> |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
</table>
<input type="button" value="EntréeProduit" onClick="DisplayHide()"/>
<div id="divhide" style="display:none;">
<form id='monForm' method="post" enctype="multipart/form-data">
<label>Nom du produit:</label>
<input id='nomproduit' type="text" name="nomproduit" size="14"/>
<br>
<br>
<label>Quantité du produit </label>
<input type="text" id="quantite" name="quantité" size="5"/>
<br>
<br>
<div><select id="famille"> <option value="1" id="fournitures ">Fournitures</option> <option value="2" id="tisannerie" >Tisannerie</option> <option value="3" id="menage" >Ménage</option><
<div><input type="submit" value="Valider" /></div>
</form>
</div> |