Aller au contenu
Ernestine

Ajax avec jQuery et JSON

Recommended Posts

Ernestine    11

La solution Ajax, de plus en plus utilisée sur le net, est une technique efficace mais qui peut vite s’avérer longue et difficile à mettre en place. Il existe cependant des méthodes pour en simplifier grandement la pratique. Dans cet article nous allons étudier la mise en place d’un processus Ajax avec l’utilisation couplée de la célèbre librairire javascript jQuery, et du format de données JSON.

Lire la suite : http://www.webmaster-hub.com/publication/Ajax-avec-jQuery-et-JSON.html

  • Vote 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Dan    133

Merci, Ernestine pour cet article très instructif :!:

Partager ce message


Lien à poster
Partager sur d’autres sites
yuston    3

Sympa effectivement. Merci.

Sinon, quelques critiques concernant juste la forme:

- il y a doublon du premier paragraphe

- est-il possible de mettre le code dans une balise code ou autre? car là c'est pas très lisible

Bref, rien de bien grave donc.

Partager ce message


Lien à poster
Partager sur d’autres sites
equids    0

Très intéressant, c'est toujours très agréable d'avoir des exemples courts et fonctionnels,

merci :cool:

Partager ce message


Lien à poster
Partager sur d’autres sites
Ernestine    11

Dan > C'est moi qui te remercie de nous offrir cet espace de publication :)

Yuston > Oui, ça y est, j'ai inséré les portions de code dans les balises adéquates.

Equid > merci ;)

Partager ce message


Lien à poster
Partager sur d’autres sites
Patrick    14

J'adore tout simplement.

Simple, clair et concis !

Merci beaucoup pour cet article.

++

Patrick

Partager ce message


Lien à poster
Partager sur d’autres sites
cmetge    0

salut,

juste une petite coquille :

"Fichier controle.php :"

"$.getJSON("controleur.php","

=> il faut harmoniser le nom du fichier.

Et pour chipoter, ajouter un <div> avant "<label for="resultat_addition">Addition : </label>"

Partager ce message


Lien à poster
Partager sur d’autres sites
Dax    0

Bonjour,

J'ai une question en rapport avec JSON et le parser...

J'ai installé le script proposé sur cette page, mais en fin du tuto ils expliquent que l'on peut sécuriser les données reçues en utilisant un parser, seulement je ne comprends pas comment faire, j'ai inclus dans mes pages le fichier json2.js téléchargeable sur json.org mais ensuite je sèche...

Je sais que c'est jData qu'il faut analyser pour voir si il contient un code malicieux mais comment faire ?

Si quelqu'un peut m'expliquer l'intégration je le remercie d'avance.

Modifié par Dax

Partager ce message


Lien à poster
Partager sur d’autres sites
wissim    1

Merci beaucoup pour ce tuto, je ne savais justement pas comment faire et par quel bout commencer.

J'aurai besoin de savoir comment faire pour que le calcul se fasse en live sans cliquer sur "Calculer !"

Une dernière chose, comment afficher le résultat dans une balise autre que input ? par exemple une div m'irait bien :)

Merci ;)

Modifié par wissim
  • Vote 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Ernestine    11

Bonjour,

Pour le faire en live, tu peux par exemple détecter l'évènement "touche relâchée", sur les deux champs de saisie. Concrètement, dans calcul.js, remplacer la ligne :

$("form#formulaire_calcul").submit(function() {

par :

$("input#nombre_a, input#nombre_b").keyup(function() {

Par contre, ça veut dire qu'une requête sera effectuée à chaque fois que l'utilisateur appuie sur une touche, donc ça peut faire ramer...

Il serait éventuellement possible, aussi, de détecter l'évènement "perte de focus" des champs nombre_a et nombre_b, c'est à dire que le calcul se lancerait chaque fois que le curseur quitte l'un de ces deux champs (avec jQuery c'est la fonction focusout()).

Pour afficher le résultat dans un div plutôt que dans un input, il faut, dans calcul.php, remplacer l'input par un div, c'est à dire remplacer

<input id="resultat_addition" type="text" readonly="readonly" />

par :

<div id="resultat_addition"></div>

Et dans le fichier calcul.js, écrire le résultat non pas avec la fonction val(), mais avec la fonction html(), et bien sûr supprimer l'input, donc remplacer :

$("input#resultat_addition").val(data['resultat_addition']);

par :

$("#resultat_addition").html(data['resultat_addition']);

  • Vote 1

Partager ce message


Lien à poster
Partager sur d’autres sites
wissim    1

IMPECCABLE, merci beaucoup.

J'ai utiliser la mécanique de ton code pour en faire autre chose.

J'ai un formulaire ou j'écris des articles. Le titre de l'article est converti via un fonction que j'ai écrite en URL.

Le problème était que je ne savais pas trop a quoi allait ressembler l'url de l'article tant que le formulaire n'était pas validé.

Maintenant avec ton code, je voie en live ce que sera l'url.

Encore merci :D

Partager ce message


Lien à poster
Partager sur d’autres sites
thick    6

Merci pour ce tuto simple et efficace comme j'aime.


Je suis loin d'être versé dans les choses du JS et pourtant j'ai tout compris :)


Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×