ajax avec jquery

**artotal** · 16/07/2008, 21h43

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 :

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

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
<!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 :

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

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

Invité · 16/07/2008, 22h57

Salut,

Voilà le code qui fonctionne chez moi

Ton code index.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
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 :

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

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 :

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

Invité · 16/07/2008, 23h23

Re

Un autre test

Changement sur index.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
 
$.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 :

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

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

**artotal** · 17/07/2008, 11h04

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 ?

**Bovino** · 17/07/2008, 11h17

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.

Invité · 17/07/2008, 16h43

Bonjour,

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

ex:

Dans index.html :
avec

Code :

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

1
2
// variable pour un tableau
var data_tab = {"le_tableau[]":["el1", "el2", "el3"]};

donne :

avec

Code :

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

1
2
// variable pour un autre tableau
var data_tab = {"le_tableau[]":["el1", "el2", ["el3_0", "el3_1", "el3_2"]]};

donne :

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- le script php -->
<blockquote>
<pre>
<?php
if (isset($_GET)) {
    print_r ($_GET);
}
else {
    echo "Rien re&ccedil;u !!!";
}
?>
</pre>
</blockquote>

Il y a peut être mieux, mais cela fonctionne...

A+

A suivre...

ajax avec jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager