ajax avec jquery

Version imprimable

ajax avec jquery

Bonjour,
j'essaie de faire de l'ajax avec jquey, je galère.
sa me renvoie du texte et les balises en html de plus j'ai des variable en php à transmettre comment faire ?
Mon bouton

Code:

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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<script src="lib/jquery.js" type="text/javascript" charset="utf-8"> </script>
		<style type="text/css" media="screen"> </style>
		<script type="text/javascript">
		$(document).ready(function(){
			//	Application du chargement ajax avec animation sur les liens ayant une classe "wajax"
			$("#bouton").click(function(){
				$.ajax({
				   type: "GET",
				   url: "traitementStat.php",
				   data: "name=John&location=Boston",
				   error:function(msg){
				     alert( "Error !: " + msg );
				   },
				   success:function(data){
				   	//affiche le contenu du fichier dans le conteneur dédié
				   	$('#contenu_fichier_ajax').css({display:"none"});
				   	$('#contenu_fichier_ajax').text(data).show("slow");
				   	$('#contenu_fichier_ajax').css({color:"green", display:"block"});
				}});
			});
		});
		</script>
	</head>
	<body><h1>Ajaxisation d'un site</h1>
 
<input class="button_test" id="bouton" value="tester" type="button">
<div>
	Contenu du fichier:
	<p id="contenu_fichier_ajax">Vos stats</p>
</div>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<style type="text/css" media="screen"> </style>
	</head>
	<body>
 
 
<div>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div><?php
echo 'ssssssssssssssssssssssssssssssssssss';
echo $_GET['name'].'';
echo $_GET['location'];
?>
</body>
</html>

ce que je réceptionne vraiment !

Code:

1
2
3
4
Ajaxisation d'un site
Contenu du fichier:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajaxisation d'un site - D�monstration</title> <style type="text/css" media="screen"> </style> </head> <body> <div>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>ssssssssssssssssssssssssssssssssssssJohnBoston</body> </html>

c'est un peu n'importe quoi la reception, d'autant que dans la doc il précise d'utilisez l'option datType :'html',
Merci

Salut,

Voilà le code qui fonctionne chez moi

Ton code index.html

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<script src="lib/jquery-1.2.6.js" type="text/javascript" charset="utf-8"> </script>
		<style type="text/css" media="screen"> </style>
		<script type="text/javascript">
		$(document).ready(function(){
			//	Application du chargement ajax avec animation sur les liens ayant une classe "wajax"
			$("#bouton").click(function(){
				/*$.ajax({
				   type: "GET",
				   url: "traitementStat.php",
				   data: "name=John&location=Boston",
				   error:function(msg){
				     alert( "Error !: " + msg );
				   },
				   success:function(data){
				   	//affiche le contenu du fichier dans le conteneur dédié
				   	$('#contenu_fichier_ajax').css({display:"none"});
				   	$('#contenu_fichier_ajax').text(data).show("slow");
				   	$('#contenu_fichier_ajax').css({color:"green", display:"block"});
				}});
			}*/
        $.ajax({
           type: "GET",
           url: "traitementStat.php",
           data: "name=John&location=Boston",
           error:function(msg){
				     alert( "Error !: " + msg );
				   },
           /*success: function(msg){ alert( "Data Saved: " + msg );}*/
 
           success:function(data){
    				   	//affiche le contenu du fichier dans le conteneur dédié
    				   	$('#contenu_fichier_ajax').css({display:"none"});
    				   	$('#contenu_fichier_ajax').text(data).show("slow");
    				   	$('#contenu_fichier_ajax').css({color:"green", display:"block"});
				  }
 
 
          }
        );
 
      })
 
		});
		</script>
	</head>
	<body><h1>Ajaxisation d'un site</h1>
 
<input class="button_test" id="bouton" value="tester" type="button">
<div>
	Contenu du fichier:
	<p id="contenu_fichier_ajax">Vos stats</p>
</div>
</body>
</html>Code :

Mon script PHP, le code pour traitementStat.php ne doit être que du pure PHP (c'est ce qui fonctionne dans mon cas.)

Code:

1
2
3
4
5
6
 
<?php
echo 'ssssssssssssssssssssssssssssssssssss';
echo $_GET['name'].'';
echo $_GET['location'];
?>

J'utilise jquery-1.2.6.js

Voilà

A+

PS: la DOC dit :

Citation:

dataType (string): format des données qui seront renvoyées du serveur. Si aucune type n'est spécifié, jQuery utilisera le type MIME pour déterminer le format adéquat: responseXMl ou ResponseText. Voici la liste des types disponibles:
"xml": retourne un document XML qui pourra être traité par jQuery.
"html": retourne du code HTML au format texte, inclus l'évaluation des script tags.
"script": évalue la réponse en Javascript et retourne cette dernière au format texte.
"json": évalue la réponse en JSON et retourne un objet Javascript.

Donc si tu mets HTML, il te retourne du code HTML (je peux me tromper, mais...)

Re

Un autre test

Changement sur index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$.ajax({
             var dt = new Date(); // Modif pour le cache
	type: "GET",
	url: "traitementStat.php",
	data: "name=John&location=Boston&time=" + dt.getMilliseconds(), // Modif pour le cache
	error:function(msg){alert( "Error !: " + msg );},
	success:function(data){
		//affiche le contenu du fichier dans le conteneur dédié
		$('#contenu_fichier_ajax').css({display:"none"});
		/*$('#contenu_fichier_ajax').text(data).show("slow");*/
		$('#contenu_fichier_ajax').append(data).show("slow"); // Modif
		$('#contenu_fichier_ajax').css({color:"green", display:"block"});
	}});

et coté php

Code:

1
2
3
4
5
6
7
 
<blockquote style="padding: 10px; background-color: InactiveCaptionText; width: 200px; border: 1px solid black;">
<?php
echo $_GET['name'].'<br />';
echo $_GET['location'];
?>
</blockquote>

C'est ok sous FF et sous IE7

Bye

17/07/2008, 11h04
artotal

En mettant
new Date();
ut modifies le cache mais pourquoi ?
L'ennui c'est qu'ont ne peux pas mettre de variable en php qui boucle dans un tableau ce qui est une pratique courante ?
17/07/2008, 11h17
Bovino

Citation:

Envoyé par artotal

L'ennui c'est qu'ont ne peux pas mettre de variable en php qui boucle dans un tableau ce qui est une pratique courante ?

C'est à dire ? Si tu cherches à transmettre à la page une variable depuis ton script, c'est possible, dans la mesure où en fait tu utilises (ou plutôt jQuery utilise) le responseText, tu peux toujours rajouter à la fin de ta réponse en php un séparateur (attention à bien le choisir !) puis ta ou tes variables, puis en javascript faire un split de la réponse et utiliser la partie html comme jlmag te l'a indiqué et le reste à ta convenance.

Passage d'un tableau simple

Bonjour,

Pour passer un tableau type [ 1, 2 , 3]

ex:

Dans index.html :
avec
Code:

1 2 // variable pour un tableau var data_tab = {"le_tableau[]":["el1", "el2", "el3"]};
donne :
http://gwendolle.free.fr/img_tab_0.png

avec
Code:

1 2 // variable pour un autre tableau var data_tab = {"le_tableau[]":["el1", "el2", ["el3_0", "el3_1", "el3_2"]]};
donne :
http://gwendolle.free.fr/img_tab_1.png

Dans traitement.php (edit: je ne me rappelais plus de print_r!)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13  <blockquote> <pre> <?php if (isset($_GET)) { print_r ($_GET); } else { echo "Rien reçu !!!"; } ?> </pre> </blockquote>
Il y a peut être mieux, mais cela fonctionne...

A+

A suivre...:P

Ce que je voulais dire c'est que ma varaible se trouve dans le corps d'ou l'interêt !
Donc la je dois récupérer le champs caché "modifier"
Code:

1 2 3 4 5 6 7 8 9 10 <form method="get" action="javascript:;"> <input type="text" value="<?php echo $libel;?>" id="libel" /> <input type="hidden" name="modifier" value="<?php echo $id;?>" /> <input type="button" value="go" /> </form> <div> Contenu du fichier: <p id="contenu_fichier_ajax">Vos stats</p> </div>

19/07/2008, 12h09
Invité

Bonjour,
Si je comprends tu veux transmettre la variable du INPUT name="modifier" et cela via une requète $.ajax()

Je pense que si tu fais dans $.ajax()

Code:

data: {"input_hidden",$(input[@name=modifier]).val()},

Tu devrais recevoir dans $_GET['input_hidden'] ou $_POST['input_hidden'], suivant la méthode utilisée, le contenu du champ INPUT ayant NAME="modifier"

Sinon, si tu as une grosse varaiable javascript à transmettre et la recevoir en tant que tableau associatif dans ton script PHP, regarde dans le forum AJAX ICI. L'inverse fonctionne aussi très bien et le tout permet de manipuler plus facilement des données.

J'ai peut-être pas tout saisi, alors n'hésites pas

A+

j'ai recopier ton code, mais chez moi sa ne fonctionne pas ?

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<script src="lib/jquery-1.2.6.js" type="text/javascript" charset="utf-8"> </script>
		<style type="text/css" media="screen"> </style>
		<script type="text/javascript">
		$(document).ready(function(){
			//	Application du chargement ajax avec animation sur les liens ayant une classe "wajax"
			$("#bouton").click(function(){
				/*$.ajax({
				   type: "GET",
				   url: "traitementStat.php",
				   data: "name=John&location=Boston",
				   error:function(msg){
				     alert( "Error !: " + msg );
				   },
				   success:function(data){
				   	//affiche le contenu du fichier dans le conteneur dédié
				   	$('#contenu_fichier_ajax').css({display:"none"});
				   	$('#contenu_fichier_ajax').text(data).show("slow");
				   	$('#contenu_fichier_ajax').css({color:"green", display:"block"});
				}});
			}*/
$.ajax({
             var dt = new Date(); // Modif pour le cache
	type: "GET",
	url: "traitementStat.php",
	data: "name=John&location=Boston&time=" + dt.getMilliseconds(), // Modif pour le cache
	error:function(msg){alert( "Error !: " + msg );},
	success:function(data){
		//affiche le contenu du fichier dans le conteneur dédié
		$('#contenu_fichier_ajax').css({display:"none"});
		/*$('#contenu_fichier_ajax').text(data).show("slow");*/
		$('#contenu_fichier_ajax').append(data).show("slow"); // Modif
		$('#contenu_fichier_ajax').css({color:"green", display:"block"});
	}});
 
 
      })
 
		});
		</script>
	</head>
	<body><h1>Ajaxisation d'un site</h1>
 
<input class="button_test" id="bouton" value="tester" type="button">
<div>
	Contenu du fichier:
	<p id="contenu_fichier_ajax">Vos stats</p>
</div>
</body>
</html>Code :

le fichier insertion.php

Code:

1
2
3
4
5
6
<blockquote style="padding: 10px; background-color: InactiveCaptionText; width: 200px; border: 1px solid black;">
<?php
echo $_GET['name'].'<br />';
echo $_GET['location'];
?>
</blockquote>

20/07/2008, 16h35
artotal

autant pour moi j'avais pas jquery...

j'ai un problème avec la capture de la variable ?
Firebug

Code:

1
2
missing : after property id
[Break on this error] data: {"input_hidden", $(input[@name=modifier]).val()},\n

le code fonctionne sans la récupération de la variable

Code:

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
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"> </script>
		<style type="text/css" media="screen"> </style>
		<script type="text/javascript">
		$(document).ready(function(){
			//	Application du chargement ajax avec animation sur les liens ayant une classe "wajax"
			$("#bouton").click(function(){
				$.ajax({
					type: "GET",
					url: "insertion.php",
					data: {"input_hidden", $(input[@name=modifier]).val()},
					error:function(msg){alert( "Error !: " + msg );},
					success:function(data){
						//affiche le contenu du fichier dans le conteneur dédié
						$('#contenu_fichier_ajax').css({display:"none"});
						/*$('#contenu_fichier_ajax').text(data).show("slow");*/
						$('#contenu_fichier_ajax').append(data).show("slow"); // Modif
						$('#contenu_fichier_ajax').css({color:"green", display:"block"});
					}});
			})
		});
		</script>
	</head>
	<body><h1>Ajaxisation d'un site</h1>
<form action="#" method="get">
	<input type="input" id="zzzz" name="modifier" value="tester" type="button" />
	<input type="button" class="button_test" id="bouton" value="tester" type="button" />
</form>
<div>
	<p id="contenu_fichier_ajax">Vos stats</p>
</div>
</body>
</html>

le code de la page insertion.php

Code:

1
2
3
4
5
6
7
8
<blockquote style="padding: 10px; background-color: InactiveCaptionText; width: 200px; border: 1px solid black;">
sqdfghjkljhgfds
<?php
echo $_GET['modifier'].'<br />';
echo $_GET['name'].'<br />';
echo $_GET['location'];
?>
</blockquote>

j'ai trouvé

Code:

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
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"> </script>
		<style type="text/css" media="screen"> </style>
		<script type="text/javascript">
		$(document).ready(function(){
			//	Application du chargement ajax avec animation sur les liens ayant une classe "wajax"
			$("#bouton").click(function(){
				var variable=$("#zzzz").val();
				$.ajax({
					type: "GET",
					url: "insertion.php",
					data: "name=John&location=Boston",
					data: "input_hidden=" + variable,
					error:function(msg){alert( "Error !: " + msg );},
					success:function(data){
						//affiche le contenu du fichier dans le conteneur dédié
						$('#contenu_fichier_ajax').css({display:"none"});
						/*$('#contenu_fichier_ajax').text(data).show("slow");*/
						$('#contenu_fichier_ajax').append(data).show("slow"); // Modif
						$('#contenu_fichier_ajax').css({color:"white", display:"block"});
					}});
			});
		});
		</script>
	</head>
	<body><h1>Ajaxisation d'un site</h1>
<form action="#" method="get">
	<input type="input" id="zzzz" name="modifier" value="tester" type="button" />
	<input type="button" class="button_test" id="bouton" value="tester" type="button" />
</form>
<div>
	<p id="contenu_fichier_ajax">Vos stats</p>
</div>
</body>
</html>

mais sa s'incrémente, à chaque click il ajoute un block ?

20/07/2008, 18h28
Invité

Bonjour,

Bon, je suis pas très bon avec JQuery, je débute :? Il faudra que je trouve comment récupérer la valeur d'un élément par son attribut name. Sinon, le code:

Code:

data: {"key": "value"}

met au bout de l'URL "?key=value"

Pour les block, c'est normal que tu ai un nouveau block à chaque clic, car le code:

Code:

$('#contenu_fichier_ajax').append(data)

insert le nouveau block reçu dans l'arbre DOM.
Il te faut soit avoir ton block déjà contenu dans l'arbre et y insérer que la valeur, soit créer une fois le block et les fois suivantes lui insérer la variable.

A+

alors pour un formulaire

Code:

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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajaxisation d'un site - Démonstration</title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"> </script>
		<style type="text/css" media="screen"> </style>
		<script type="text/javascript">
		$(document).ready(function(){
			$("form.test").submit(function() {
				//s = $("input[@type=text]").serialize();
				m=$("#modifier").val();
				//d=$("#delete").val();
			    $.ajax({ 
			        type: "GET", 
			        data: "id=" + m,
			        url: $(this).attr("action"),
			        success: function(retour)
			        {
						$("#cacher").empty().append(retour);
			        }
			    });
			    return false;
			});
		});
		</script>
	</head>
	<body>
		<div id="cacher">
			<h3>Ajaxisation</h3>
			<form class="test" action="formulaireReception.php" method="get" id="formu">
				<input type="input" id="modifier" name="modifier" value="" />
				<input type="submit" id="bouton" value="tester" />
			</form>
		</div>
</body>
</html>

ensuite je récupère ma variable.

Code:

1
2
3
4
5
6
7
8
9
10
11
<?php
        $a=$_GET['id'];
        $z=$_GET['z'];
        if(isset($_GET['modifier']))
                //header('location:'.$_SERVER['HTTP_REFERER']);
?>
<h3>Félicitation votre modification est prise en compte</h3>
			<form class="test" action="formulaireReception.php" method="get" id="formu">
				<input type="input" id="modifier" name="modifier" value="<?php echo $a;?>" />
				<input type="submit" id="bouton" value="tester" />
			</form>

Sa fonctionne mais bizarrement, quand je modifie une deuxième fois, il va chercher la page comme si le javascript n'esxistait pas ?
Par ailleurs ont pourrai envisager de sérialiser et désialariser, mais comment ?
Une fois en place je ferai une classe en PHP

20/07/2008, 22h26
Invité

Bonjour,
Quand j'écris:

Citation:

...soit créer une fois le block et les fois suivantes lui insérer la variable.

Il faut comprendre lui insérer de la même manière ( c'est à dire via $.ajax() )la nouvelle valeur et non par php.

Enfin, là, je vois plus ce que tu veux faire Jasvascript/php ?

A+