Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent de faire des tâches plus rapidement et plus facilement. L’utilisation d’Ajax est un moyen très pratique pour créer des webapps d’initiation. Avec Ajax, il est possible d’afficher le nombre de clics sur un bouton dans un textarea par réponse Ajax. Dans cet article, nous allons examiner en détail comment cela peut être fait et quels sont les avantages de cette méthode.
Webapps d’initiation : Ajax : Afficher le nombre de clic bouton dans un textarea par réponse Ajax
1. Présentation
Dans cette webapp d’initiation utilisant jQuery UI, voyons comment
2. Structure type de la webapp
Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :
- un seul répertoire incluant :
- librairies utilisées
- la page html de la webapp
- le code serveur Pyduino opérationnel incluant la fonction d’envoi de réponse Ajax
- la page HTML de la webapp incluant :
- la définition des éléments graphique au niveau du body
- l’inclusion des librairies utilisées
- le code Javascript actif de la page incluant la fonction de gestion de la réponse Ajax
3. Body HTML : définition des éléments graphiques de la page
<br>
<textarea rows=« 4 » cols=« 50 » placeholder=« Cliquer sur le bouton… » id=« textarea »></textarea>
4. Head : Inclusion des librairies utilisées
5. Head : Code Javascript de la page
$(document).ready(function(){
$(« #button »).click(function(){
compt=compt+1;
$.get(« ajax/ »+compt, manageReponseAjaxServeur); // envoi d’une requete AJAX
}); // fin function + fin action + fin $
}); // fin function + fin ready + fin $
6. Ajax : Code Python « côté serveur » : Envoi de la réponse Ajax
print « paramIn= »+paramIn # debug
# la reponse
reponseAjax=( # debutreponse AJAX
paramIn
) # fin reponse AJAX
return reponseAjax
7. Ajax : Code Javascript « côté client » : Gestion de la réponse Ajax
dataIn=parseInt(dataIn);
if (dataIn==1)$(« #textarea »).append(« ajax: « + dataIn + » Clic bouton »+« \n« );
else $(« #textarea »).append(« ajax: « +dataIn + » Clics bouton »+« \n« );
$(« #textarea »).get(0).setSelectionRange($(« #textarea »).get(0).selectionEnd–1,$(« #textarea »).get(0).selectionEnd–1); // se place en derniere ligne -1 pour avant saut de ligne
} // fin fonction de gestion de la reponse AJAX
8. La webapp complète :
L’archive complète de la webapp est disponible ici, incluant :
- La page HTML complète
- Le serveur Pyduino opérationnel
- Les librairies utilisées
Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.
