Tutoriel Vidéo jQuery : JSON

Dans ce tutoriel vidéo vous découvrirez comment utiliser le language JSON pour permettre le transfert de variables complexes depuis PHP vers jQuery. Nous allons prendre comme exemple un formulaire de login qui se fera en Ajax avec plusieurs niveau d'erreurs.


Télécharger la vidéo
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Masonry

Masonry
28m

Dans ce tutoriel vidéo vous apprendrez comment utiliser le plugin...

Décompte Javascript

Décompte Javascript
17m

Dans ce tutoriel vidéo vous apprendrez à créer un système de décompte...

41 commentaires
Ajouter un commentaire

polo03 Il y a 2 mois Répondre

Très bon tuto, comme tous les autres d'ailleurs,...
Mais : "Je vais capturer qu'est-ce qui y'a écrit" ça m'a bien fait rire moi ! :P

boum boum Il y a 3 mois Répondre

très beau! j'adore!

seb Il y a 9 mois Répondre

Bonjour à tous,

J'ai un problème avec $.post(...), il ne fonctionne pas.
La biblio jquery est bien chargée.
Je fait donc appel a vous pour éventuellement régler mon problème.

merci d'avance

redmatrice Il y a 9 mois Répondre

merci

yvesman Il y a 11 mois Répondre

Je n'arrive pas à le faire fonctionner :
$(function(){
$("#testJson").submit(function(){
alert("test");
return false;
login=$(this).find("input[name=textfield]").val()
pass=$(this).find("input[name=textfield2]").val()
url=$(this).attr("action")
alert(pass)
return false;
});
});
J'ai bien inclus le jQuery.js et j'ai essayé plusieurs versions. Query.js s'exécute j'ai mis une alert("debut") et fin dans le fichier.
Mon formulaire a bien l'id testJson (casse conforme) et l'alert("test") ne s'exécute pas et si je continue dans fireburg il est précisé reference error pass is not defined. Je pense que puisque alert("test") ne s'exécute pas c'est que submit ne s'exécute pas. Quelqu'un peut-il m'aider, merci. Je ne trouve pas le code source pour vérifier.
J'ai posté la question dans le forum mais peut-être est-il mieux ici

yvesman Il y a 11 mois Répondre

Je n'arrive pas à le faire fonctionner :

sultan Il y a 1 an Répondre

salut Grafikart Merci bien pour ces tutoriel j'ai bcp aimé le cour
mais je trouve que il a pas de sécurité méme si ajouter strip_tags sur mon code php
le visiteur ajoute des javascript comme alert ... et ca marche pas bien il px volé les cookies..
comment en px sécurisé le code javascript

Yoan Il y a 1 an Répondre

Bonjour, lorsque je rajoute du css dans ma feuille style.css, pour mettre de couleur rouge les erreur renvoyer :
.error {
color: red;
}
sa ne marche pas, comment faire ??

maxfr Il y a 2 ans Répondre

Bonjour Grafikart,
Merci pour le tuto
J'aurais une petite question qui se pourrait être assez bête mais qui me bloque un peu dans mon codage:
avec JSON je fais une requête POST qui va chercher des informations dans ma BDD et me les retournes dans un tableau sous cette forme :
$data = Array
(
[erreur] => non
[retour] => Array
(
[0] => Array
(
[id] => 5
[src] => ngskwt.jpg
[nom] => blabla
...
)
[1] => Array
(
[id] => 6
...
)
)
)

Ce tableau est ensuite encodé en json puis retourné dans le JS.
Comment, via JQuery, je peux récupérer tout le contenu de data.retour pour ensuite faire un $('#img').append('<img src="images/'+data.retour.[$i].src+'" />');

Mehdi Il y a 2 ans Répondre

Salut trés bon tuto, par contre j'ai un soucis quand j'ai souhaite traiter les données du formulaire sur la meme page qui est include , json recupére toute le contenu html et ne reconnait plus data.erreur dans jquery firefub indique data is nullla page est bien encode e utf-8 , et pourtant je ne demande que à encoder une variable précise mais il ne se retrouve pas.

Leo Il y a 2 ans Répondre

Super ce tutos !

Merci Il y a 2 ans Répondre

Merci beaucoup !

Nag Il y a 2 ans Répondre

Je me corrige, c'est avec la version 1.4.1 que ca ne fonctionne pas sur IE
==> ca fonctionne avec la derniere 1.4.2

dsl

Nag Il y a 2 ans Répondre

Très bon tuto mais ne fonctionne pas sur IE avec le dernière version de jquery 1.4.2, par contre ca fonctionne avec la version 1.3.2

Corentin Il y a 2 ans Répondre

J'ai un autre souci par contre j'arrive pas a récupérer la valeur de mon checkbox sa me renvoie toujours "on" même si la case est pas cocher ...

Corentin

Corentin Il y a 2 ans - Répondre

Résolu : charte = $(this).find("input:checked[name=charte] ") .val() ;

darkn1ko Il y a 2 ans Répondre

Détecter quoi? javascript ? jamais regardé mais on peut le détecter.

mais un site sans javascript y en a presque pas et des personnes sans javascript en 2010 ca doit exister que dans certaines entreprises tres tres parano.

Corentin Il y a 2 ans - Répondre

^^ Et bien pourtant sa existe ^^

Corentin Il y a 2 ans Répondre

Ben comment grafikart arrive à détecter ??

darkn1ko Il y a 2 ans Répondre

y fait pas.

Corentin Il y a 2 ans Répondre

Coucou,
Bravo pour se tuto mais comment on fais si l'utilisateur à javascript désactivé ...

Corentin

benbox69 Il y a 2 ans Répondre

Merci pour le tuto, très bien, à part la petite partie à la fin qui a tout de même son importance : quand javascript n'est pas activé.
J'ai compris qu'on vérifiait l'existence d'une variable $_POST indiquant si on utilise jQuery ou pas mais je ne comprend pas comment traiter le résultat si il n'y a pas jQuery, afficher les erreurs plus particulièrement.

Merci

Badbart Il y a 2 ans Répondre

Pour json_encode() et json_decode, faut php 5.2 mini sur ton serveur.

Thomas Il y a 2 ans Répondre

Très bon tuto,
j'ai essaye de mettre en place ca marche en local par contre sur un serveur j'ai ce message d'erreur
"Fatal error</b>: Call to undefined function: json_encode() in <b>/homez.170/lmnpforu/www/lgm/form.php</b> on line <b>19</b><br />"
La ligne 19 correspond echo json_encode($t);
Est ce du a mon hebergeur ....

Necko Il y a 2 ans Répondre

Très bon tuto, jquery est vraiment surpuissant

Syl20 Il y a 2 ans Répondre

Peut-on utiliser JSON pour une page php qui ne retourne pas uniquement des variables json_encode() ? Je m'explique : j'ai un systeme de panier qui est mis à jour grace au script et j'aimerai qu'une partie des valeurs du panier.php soient retournées pour les afficher dans une petite div en haut de la page avec un lien pour acceder au panier (panier.php).

Le problème est qu'un alert(data.variable) me retourne rien (undefined).
Quelqu'un peut m'éclairer ?

Grafikart Il y a 2 ans - Répondre

Non on ne peux pas avoir un retour qui mélange json et autre chose.

Didi Il y a 2 ans Répondre

Com du haut à supprimer, excuser moi du dérangement.
La fatigue...

Didi Il y a 2 ans Répondre

Débutant en Jquery, je suis confronté face au problème suivant :
- je réalise ce même type de formulaire en ajax.
- cependant, pour créer une session, session_start dans le fichier check.php ne passe pas.

Comment donc créer des sessions par cette méthode la ?

Cordialement

Dr Rodney Mckay Il y a 2 ans Répondre

Je découvre se tutoriel à l'instant. Une question me taraude les méninges. N'y a t il pas, avec jSON, une vraie alternative pour gérer de façon efficace le problème des urls non complémentés en AJAX ?
C'est un vrai frein pour la navigation AJAX. Je suis en train de voir les solution en passant par des ancres mais ça m'apparait plus comme du bidouillage, qu'une réelle solution. Qu'en pensez-vous ?

Oliv' Il y a 2 ans Répondre

Vraiment merci pour ce tuto, cela m'a permis de mieux comprendre le passage de variables via JSON.

Tof06 Il y a 2 ans Répondre

Salut, si je fait un sondage en json, je dois recupérer l'id de mon input de type radio. Comment faire ?

@rnaud ! Il y a 2 ans Répondre

super tuto!! merci

Amine-dev Il y a 2 ans Répondre

super tuto ~ merçi

fumsteph Il y a 2 ans Répondre

Yop, je reviens avec la solution avec $.ajax pour ceux qui veulent

Je préfère la méthode $.ajax car elle permet d'envoyer un grand nombre de variable de façon plus simple. En effet, pour prendre en considération l'ensemble des variables d'un formulaires il suffit de faire

var identifiants = $("#monformulaire").serialize();

ensuite, on appel ajax de la façon suivante :

$.ajax ({
type : "POST",
url : url,
data : identifiants,
success : function(data){

}
});

Pour récupérer comme ici en objet JSON, il suffit d'ajouter la ligne dataType : "json", juste après la ligne data et le tour est joué.

En espérant que ça serve à quelqu'un

fumsteph Il y a 2 ans Répondre

Super tuto pour changer

C'est exactement ce dont j'avais besoin.

En revanche, j'utilise plutôt $.ajax, c'est plus rapide que $.post, il faut donc que je vois comment on récupère le JSON avec cette méthode

Merci encore.

29.02 Il y a 2 ans Répondre

Très bon tutoriel.
Comme sa, tout le monde au JSON

Robert Il y a 2 ans Répondre

:) :P

Dimer47 Il y a 2 ans Répondre

Super tutoriel mais assez compliquer a mettre en place

Pikachu Il y a 2 ans Répondre

Merci pour le tuto,
Et c'est pour quand le tuto concernant Template Wordpress :xd

leknoppix Il y a 2 ans Répondre

Vraiment génial comme tutoriel. Dommage que les commentaires laissés par les membres connectés ne soit pas visible quand on est déconnecté.

Grafikart Il y a 2 ans - Répondre

Euh... Ce n'est pas le cas Tout le monde peut voir les commentaire de tout le monde

s-wf Il y a 2 ans Répondre

wow la 3éme à posté un com ^^

cucualex Il y a 2 ans Répondre

Merci pour ce tuto, il va nous permettre de pouvoir tous se mettre au JSON
Encore merci pour ton boulot

Zeldjian Il y a 2 ans Répondre

First

Merci bien pour ce tutoriel.

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.