ZeoLab : Développement, Référencement, et autres Geekeries ...

Prototype est un framwork JavaScript qui vous permettra de réaliser simplement des requête AJAX. Dans ce tutorial, nous allons faire un formulaire qui appelle un script PHP par l’intermédiaire de Prototype.

Dans un premier temps, nous allons récupérer le framework, depuis le site officiel : http://www.prototypejs.org
Puis nous allons ouvrir un éditeur de script tels que Scite, NotePad++, …

Le fichier « identification.html »

Nom : 

Identification : 
 Puce
 Tatouage

Propriétaire : 

Le fichier « fonctions.js »

function fct_tatouage() {
var puce = document.getElementById("puce").checked;
var tatouage = document.getElementById("tatouage").checked;
// On vérifie lequel a été coché
if (puce == true) {
document.getElementById("divtatouage").innerHTML = "";
}
else {
// Une variable pour créer des composants HTML
var composant = 1;
// L'ID de la div cible
var div = "divtatouage";
// Le chemin + le fichier qui va traiter la requête AJAX
var url = "afficher_composant.php";
// Les options : la méthode et les paramètres (les variables contenant des données)
var options = {
method: "post",
parameters: "composant=" + composant
};
// La transmission
var  ajaxCall = new Ajax.Updater(div, url, options);
}
}

function fct_identification() {
// On récupère les données du formulaire
var nom = document.getElementById("nomid").value;
var proprietaire = document.getElementById("proprietaireid").value;
var puce = document.getElementById("puce").checked;
var tatouage = document.getElementById("tatouage").checked;
// On vérifie pour l'identification
if (puce == true) {
// On paramètre les données
var options = {
method: "post",
parameters: "nom=" + nom + "&proprietaire=" + proprietaire + "&identification=puce"
};
}
else {
// On récupère le numéro de tatouage
var numero = document.getElementById("numero").value;
// On paramètre les données
var options = {
method: "post",
parameters: "nom=" + nom + "&proprietaire=" + proprietaire + "&identification=tatouage" + "&numero=" + numero
};
}
var url = "enregistrer.php";
var div = "enregistrer";
var  ajaxCall = new Ajax.Updater(div, url, options);
}

Le fichier « afficher_composant.php »

// On récupère les données du formulaire
extract($_POST);
if (composant == 1) {
print('
');
}
/*
On peut créer d'autres composants ...
*/

Le fichier « enregistrer.php » peut être un script d’enregistrement dans une base de données, comme celui sur SQLITE !

Ressources :
- Un guide des fonctions : cliquez ici