Ajax avec jQuery et JSON

[Ernestine]

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

[Dan]

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

[yuston]

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.

[equids]

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

merci

[Ernestine]

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

[Patrick]

J'adore tout simplement.

Simple, clair et concis !

Merci beaucoup pour cet article.

++

Patrick

[cmetge]

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>"

[Ernestine]

C'est corrigé, merci.

[vespa]

Merci pour cet article

[Dax]

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é 9 Septembre 2010 par Dax

[wissim]

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é 10 Mars 2011 par wissim

[Ernestine]

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']);

[wissim]

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

[Dan]

Une deuxième partie de cet article a été mise en ligne.

Vous la trouverez à cette page : http://www.webmaster-hub.com/publication/Ajax-avec-jQuery-et-JSON-deuxieme.html

[Portekoi]

Simple, limpide et efficace

[thick]

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

[Ernestine]

Merci