Webmaster Hub: Ajax avec jQuery et JSON - Webmaster Hub

Aller au contenu

Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Ajax avec jQuery et JSON

#1 L'utilisateur est hors-ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 11 août 2010 - 17:07

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...ry-et-JSON.html
0

#2 L'utilisateur est en ligne   Dan 

  • Webmaster
  • Voir le blog
  • Voir la galerie
  • Groupe : Direction
  • Messages : 22 946
  • Inscrit(e) : 18-août 03
  • Genre:Homme
  • Localisation:St Anne, Alderney
  • Société:Webmaster Hub Ltd.

Posté 11 août 2010 - 18:06

Merci, Ernestine pour cet article très instructif :!:
La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Si la pratique et la théorie sont réunies, rien ne fonctionne et on ne sait pas pourquoi. - Albert Einstein -
Infogérance de serveurs dédiés OVH
0

#3 L'utilisateur est hors-ligne   yuston 

  • Voir le blog
  • Groupe : Membre+
  • Messages : 589
  • Inscrit(e) : 07-octobre 04
  • Genre:Homme
  • Localisation:Lausanne

Posté 11 août 2010 - 18:29

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.
Andersen Lau - Me retrouver sur Twitter
Pour les jeunes qui n'ont pas encore réussi le permis de conduire, faites une petite accélération (prioritairement en voiture!) sur Le-Permis.ch. A fond les pédales!
0

#4 L'utilisateur est hors-ligne   equids 

  • Groupe : Hubmaster
  • Messages : 180
  • Inscrit(e) : 22-novembre 06
  • Genre:Homme
  • Localisation:Paris

Posté 11 août 2010 - 20:35

Très intéressant, c'est toujours très agréable d'avoir des exemples courts et fonctionnels,
merci :cool:
Cheval Annonce, spécialiste des petites annonces de vente de chevaux.
Communauté équestre sur le Forum cheval
Articles et actualités sur l'equitation et le monde du cheval.
0

#5 L'utilisateur est hors-ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 11 août 2010 - 22:12

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 ;)
0

#6 L'utilisateur est hors-ligne   Patrick 

  • Le débordeur !
  • Groupe : Fondateur
  • Messages : 2 149
  • Inscrit(e) : 14-décembre 04
  • Genre:Homme
  • Localisation:Longchamp (21)
  • Société:Adifco

Posté 12 août 2010 - 12:16

J'adore tout simplement.
Simple, clair et concis !

Merci beaucoup pour cet article.

++

Patrick
Devis référencement pour votre site.
Référencement avec paiement aux résultats, la première page de Google sinon rien !
Référencement pour TPE, PME/PMI et grands comptes.
Adifco est un organisme de formation agréé: HTML, CSS, PHP, MySQL, SEO, SEA, etc.
0

#7 L'utilisateur est hors-ligne   cmetge 

  • Groupe : Membre
  • Messages : 1
  • Inscrit(e) : 09-juin 04
  • Localisation:Montpellier
  • Société:bdmultimedia

Posté 09 septembre 2010 - 09:43

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

#8 L'utilisateur est hors-ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 09 septembre 2010 - 09:59

C'est corrigé, merci.
0

#9 L'utilisateur est hors-ligne   vespa 

  • Vespa
  • Groupe : Hubmaster
  • Messages : 640
  • Inscrit(e) : 23-juin 04
  • Localisation:Paris

Posté 09 septembre 2010 - 12:31

Merci pour cet article :thumbsup:
0

#10 L'utilisateur est hors-ligne   Dax 

  • Groupe : Webmaster Régulier
  • Messages : 95
  • Inscrit(e) : 18-décembre 06
  • Genre:Homme

Posté 09 septembre 2010 - 18:20

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.

Ce message a été modifié par Dax - 09 septembre 2010 - 18:21.

0

#11 L'utilisateur est hors-ligne   wissim 

  • Groupe : Membre
  • Messages : 4
  • Inscrit(e) : 23-juillet 06

Posté 10 mars 2011 - 16:09

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

Ce message a été modifié par wissim - 10 mars 2011 - 16:58.

1

#12 L'utilisateur est hors-ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 10 mars 2011 - 17:10

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

0

#13 L'utilisateur est hors-ligne   wissim 

  • Groupe : Membre
  • Messages : 4
  • Inscrit(e) : 23-juillet 06

Posté 10 mars 2011 - 18:22

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
0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)