[JQuery] formulaire et jquery

**Hotfirenet** · 26/08/2008, 12h08

Bonjour à tous toujours dans l'apprentissage

pourquoi si je fais

test3.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>                                                                  
	<head>           
		<title>test 3</title>    
		<script type="text/javascript" src="lib/js/jquery.js"></script>   
		<script type="text/javascript">
			$(function() {
				$('#varForm').submit(function() {
				nom = $('#nom');
			$.post("test.php", { name: nom },  
     function success(data){  
           alert(data.name +' '+data.email);  
       },"json"); // on passe en parametre optionnel le type de retour ici JSON  				
				});
			});
		</script>
		<style type="text/css">
 
		</style>                                                 
	</head>                                                                 
	<body>                  
		<form id="exemple3Form" action="">
			<label for="nom">Votre nom</label>
			<input type="text" id="nom"  /><br />
			<input type="submit" />
		</form>
	</body>                                                                 
</html>

et dans mon fichier test3.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<?php echo json_encode($_POST);   ?>

ca ne fonctionne pas ??

également le contenu ici remonte dans une alertbox, mais pour qu'il aille dans une div comment faire ??

et si c'est un formulaire avec plusieurs champs si j'ai bien compris il faut utiliser serialize, mais peut ont faire $('#monForm').serialize ??

Merci par avance

**franculo_caoulene** · 26/08/2008, 12h25

Salut,

"Ca ne fonctionne pas" ne veut rien dire. Que constates-tu? As-tu une erreur HTTP 404 ou 500, par exemple? 404 car tu nous montre le code d'un fichier test3.php mais dans ton script tu appelles test.php.
Que retourne ton code serveur (à poster plutôt que le code php la prochaine fois).

Pour que le contenu s'affiche dans un élément il faut utiliser une des ces méthodes : http://docs.jquery.com/Manipulation. Il faudrait plus de précisions.

Pour serialize(), même réponse que ci-dessus. Voici la documentation à lire : http://docs.jquery.com/Ajax/serialize

**Hotfirenet** · 26/08/2008, 13h27

justement dans firebug, c'est ça le problème c'est que ça ne m'affiche rien

erreur de frappe pour test.php

je met un exemple a cette adresse : http://labo.hotfirenet.com/Apprentis.../exemple3.html

pour l'exmple 2 sur http://labo.hotfirenet.com/Apprentis.../exemple2.html fonctionne

**franculo_caoulene** · 26/08/2008, 14h37

Dans exemple3 le formulaire n'a pas d'id et tu attaches l'évènement à un élément identifié en tant que "varForm"

**Hotfirenet** · 26/08/2008, 14h56

Ok autant pour moi c'est corriger mais je ne pense pas que j'utilise la méthode post de la bonne façon ..

**Hotfirenet** · 26/08/2008, 16h41

comme ceci :

mais j'aurais préféré passer par $post

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>                                                                  
	<head>           
		<title>Apprentissage jQuery - Exemple 3</title>    
		<script type="text/javascript" src="lib/js/jquery.js"></script>   
		<script type="text/javascript">
			$(function() {
				$('#exemple3Form').submit(function() {
					jQuery.ajax({
						type: "POST",
						url: "exemple3.php",
						data: $('#nom'),
						error: function() {
							console.debug("Probleme de submit");
						},
						success: function(r) {
							$('#resultat').text(r);
						}
					});
					return false;
				} );
			} );
		</script>
		<style type="text/css">
 
		</style>                                                 
	</head>                                                                 
	<body>                  
		<form id="exemple3Form" action="">
			<label for="nom">Votre nom</label>
			<input type="text" name="nom" id="nom"  /><br />
			<input type="submit" />
		</form>
		<div id="resultat"></div>
	</body>                                                                 
</html>

Invité · 26/08/2008, 17h17

Bonjour,

Tu veux passer par des données type JSON ou ?nom=toto ? Ce n'est pas la même chose!
Dans ton exemple précédent, la valeur du data est mauvaise.

Il faut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
jQuery.ajax({
	type: "POST",
	url: "exemple3.php",
	data: "nom="+$('#nom').val(), // ou data: {nom: $('#nom').val()} et c est jquery qui transformera en nom=toto
	error: function() {console.debug("Probleme de submit");},
	success: function(r) {$('#resultat').text(r);}
});

Ou via serialize():

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
jQuery.ajax({
	type: "POST",
	url: "exemple3.php",
	data: $('#exemple3Form').serialize(),
	error: function() {console.debug("Probleme de submit");},
	success: function(r) {$('#resultat').text(r);}
});

A+

**Hotfirenet** · 26/08/2008, 17h48

je fais bien la différence entre get et post en php y'a pas de prob

c'est surtout après la j'utilise jQuery.ajax, mais qu'elle est la différence entre jQuery.ajax et $ajax
et que sont $post et $get si l'on peut faire ajax({ type: 'POST' })

je pensais passer par json car je pense que c'est plus propre mais c'est après pour récupérer les variables que je en sais pas faire, alors je pense retourner un contenu html avec mes valeurs intégrer je pense que c'est plus facile mais moins propre

en tout cas merci de ton aide

Invité · 26/08/2008, 18h31

Re,

Pas de différence entre jQuery.ajax() et $.ajax(), $ est un alias de jQuery (pas oublier le point).

$.ajax() est la fonction complète où il est possible de tout paramétrer.
$.post() et $.get() sont des fonctions "simplificatrices", certains paramètres sont déjà fixés (requète de type POST ou de type GET).

Le script PHP peut effectivement renvoyer une réponse sous forme JSON, HTML, XML, ... Il n'y a pas, à mon sens, de plus ou moins propre. Simplement, pour jquery, si tu lui transmets une réponse en JSON, il faut le lui indiquer, et il fera une évaluation de la réponse pour créer un objet javascript en représentation JSON, donc facilement manipulable. Si la réponse est au format HTML, ce qui est aussi propre, il est possible simplement de l'inserrer dans le DOM (ex: $('#lediv').html(mareponse) ).

Pour ce qui est de JSON, tu me lire ce post

A+

[JQuery] formulaire et jquery

jQuery

Discussions similaires

Partager

Partager