Nous considérons les 2 fichiers suivant :
L’objectif est d’externaliser la résolution d’une équation du second degré le serveur (Calcul.php
). Le résultat doit s’afficher dans la page Resultat.html
sans que la page soit rechargée. ATTENTION :
Calcul.php
<form>
pour saisir a,b, et cPOST
/* Envoyer des informations au serveur pour un traitement */
.open("POST", "Calcul.php", true);
xhttp
/* Ne pas oublier l'encodage des caractères */
.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp
/* Format de la donnée lorsque l'on envoi avec la méthode post */
.send("pseudo="+pseudo+"&mdp="+mdp); xhttp
Nous considérons le fichier mediatheque.json
suivant :
[
{
"titre":"Jurassic Park",
"realisateur":"Steven Spielberg",
"annee de realisation": 1993,
"duree": 128
},
{
"titre":"Harry Potter",
"realisateur":"Chris Colombus",
"annee de realisation": 2001,
"duree": 159
},
{
"titre":"Le Seigneur des anneaux",
"realisateur":"Peter Jackson",
"annee de realisation": 2001,
"duree": 228
},
{
"titre":"Star Wars",
"realisateur":"Georges Lucas",
"annee de realisation": 1977,
"duree": 125
}
]
gestionMedia.php
qui affiche le contenu du fichier mediatheque.json
<form>
.ajouter.php
qui ajoute au fichier JSON les informations du formulaire, via un appel AJAX. Attention on utilisera un format JSON pour le nouveau film et la méthode POST
<tr>
et <td>
lorsque le nouveau film a été ajouté<input type="button" value="valider" onclick="maFonction()">
input
en javascript= document.getElementById("maVar").value; maVar
/* Récuperer le contenu du fichier JSON */
$tab = file_get_contents("montab.json");
/* Décoder le contenu */
$array_data = json_decode($tab, true);
/* Les infos que l'on souhaite ajouter */
$maChaineDeCaractere="{nom:plant,prenom:robert}";
/* Transformer la chaine de caractère en tableau */
$array_data[] = json_decode($maChaineDeCaractere);
/* Encoder le tableau en json */
$final_data = json_encode($array_data);
/* Ajouter les données au fichier json */
file_put_contents("montab.json", $final_data);
/* Récuperer le contenu du fichier JSON */
$tab = file_get_contents("montab.json");
/* Décoder le contenu */
$array_data = json_decode($tab, true);
/* Transformer les infos du formulaire en tableau */
$newdata = array(
"nom"=>"plant",
"prenom"=>"robert"
);
/* ajouter ce tableau à l'ancien tableau*/
$array_data[]=$newdata;
/* Encoder le tableau en json */
$final_data = json_encode($array_data,JSON_PRETTY_PRINT);
/* l'option => JSON_PRETTY_PRINT : permet d'afficher le json avec les infos lignes par lignes
/* Ajouter les données au fichier json */
file_put_contents("montab.json", $final_data);
html
en javascript//Création d ' une ligne
= document.createElement('tr');
tr
//Création de 2 colonnes
.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr
//Remplir les colonnes
.cells[0].appendChild(document.createTextNode("toto"));
tr.cells[1].appendChild(document.createTextNode("tutu"));
tr
//Récupération du tableau dont l'id est media
= document.getElementById("media");
element
//Ajout de la ligne contenant les colonnes à l'élément dont l'id est media
.appendChild(tr); element
Nous souhaitons réaliser le jeu du pendu. Le mot mystère sera tiré aléatoirement depuis le fichier mots.txt
et sera stocké dans la session. Le choix des lettres sera fait par des boutons (un bouton par lettre), et une zone de “ETAT” sera prévu afin d’indiquer le nombre de coup restant et les lettres déjà jouées. Si la lettre sur laquelle le joueur a cliqué appartient au mot mystère, alors l’affichage du mot évolue afin defaire apparaître la lettre au bon endroit dans le mot. Sinon, il y a un coup restant en moins.
Ce traitement doit être géré en AJAX. Une fois la lettre demandée, le bouton ne doit plus être cliquable afin de ne pas demander plusieurs fois la même lettre. En bas de la page, un bouton Nouvelle partie
doit permettre de recommencer une partie de pendu avecun autre mot tiré aléatoirement.