ajax avec jquery

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

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, 23h57

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é · 17/07/2008, 00h23

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, 12h04

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, 12h17

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, 17h43

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

**artotal** · 19/07/2008, 12h16

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 :

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

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>

Invité · 19/07/2008, 13h09

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 :

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

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+

**artotal** · 20/07/2008, 17h29

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

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

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

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>

**artotal** · 20/07/2008, 17h35

autant pour moi j'avais pas jquery...

**artotal** · 20/07/2008, 17h43

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

Code :

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

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 :

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

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

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>

**artotal** · 20/07/2008, 18h01

j'ai trouvé

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

Invité · 20/07/2008, 19h28

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 :

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

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 :

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

$('#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+

**artotal** · 20/07/2008, 22h49

alors pour un formulaire

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

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

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

Invité · 20/07/2008, 23h26

Bonjour,
Quand j'écris:

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

ajax avec jquery

jQuery

Discussions similaires

Partager

Partager