[AJAX] envoyer une donnée avec jquery et recevoir avec php

Version imprimable

25/12/2011, 10h52
4uatre

[AJAX] envoyer une donnée avec jquery et recevoir avec php
Bonojur;

je suis nouveau dans ce forum, et dans la programmation javascript (bib jquery)
commançant dans le vif du sujet :

je souaite faire un petit menu qui va me permettre de basculer entre 4 langues pour un siteweb culturel bref, voici mon code :

html :
Code:

1 2 3 4 <a id="lang_fr" href="#" >fr</a> <a id="lang_en" href="#" >en</a> <a id="lang_de" href="#" >de</a> <a id="lang_es" href="#" >es</a>
jquery :
Code:

1 2 3 4 5 6 7 8 $(document).ready(function() { var l="" ; $("a").click(function (){ l = $(this).html(); alert(l); $.post("jquery.php", {name: l}); }); });
php :
Code:

1 2 3 4 5 $lang=""; if (isset($_POST['name'])){ $lang=$_POST['name']; echo $lang ; }
l'alert m'affiche bien à chaque foi : fr, de, en ou es.
mais la methode $.post n'envoi rien et je suis bloqué :traine: .
peut étre mon raisonnement est faux je sais pas :calim2:, j'ai googlé ici et la
mais la plus part des solutions présents POST étaient pour un formulaire html avec la balise form ect ... mais moi je veux pas utiliser un formulaire.
je peut faire comme ça :

Code:

<a id="lang_fr" href="monfichier.php?lang=fr" >fr</a>

ensuite extraire le contenu du variable lang de l'URL seulement avec php sans jquery, cependant je veux que le passage soit transparent et sans passage de paramètres dans l'URL.

bonjour :)
tu peux utiliser ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function() {
        var l="" ;
		$("a").click(function (){ 
			l = $(this).html(); 
			alert(l);
			$.ajax({
  url: "jquery.php",
  type:"POST",
  data:{name,l},
  success: function(msg){  $("#id").html( msg );}
                       });
		});
        });

remplace #id par l'identifiant de l'élément que tu veux changer

bonsoir,

j'ai utilisé ton code rotrevrep et j'ai passé l'id comme tu ma indiqué mais ça n'a pas marché :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
        var l="" ;
	var id_="";
		$("a").click(function (){ 
			l = $(this).html(); 
			id_=$(this).attr('id');
			$.ajax({
  url: "jquery.php",
  type:"POST",
  data:{name,l},
  success: function(msg){  $(id_).html( msg );}
                       });
		});
});

avez vous testez le code ?

27/12/2011, 11h23
Bovino

Ton premier code était suffisant, le seul problème n'est pas

Citation:

mais la methode $.post n'envoi rien

mais le fait que tu ne fais rien du résultat retourné par PHP.
$.post() prend un 3e paramètre qui est une fonction de rappel permettant de traiter le résultat reçu :

Code:

$.post("jquery.php", {name: l}, function(reponse){alert(reponse);});

bonsoir,

merci pour la correction du code, mais coté php il n'affiche pas toujours le résultat du post récupéré. j'ai modifié le code php pour vérifier voici tout le code :

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
 
<?php
if (empty($_POST['name'])) {
        $return['error'] = true;
        $return['msg'] = 'You did not enter you language.';
}
else {
        $return['error'] = false;
        $return['msg'] = 'You\'ve entered: ' . $_POST['name'] . '.';
}
 
echo json_encode($return);
?>
<!DOCTYPE html>
<html>
<head>
<title>Post</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script language="javascript" type="text/javascript">
var l="" ;
var id_="";
$(document).ready(function() {    
		$("a").click(function (){ 
			l = $(this).html(); 
			id_=$(this).attr('id');
			$.post("jquery.php", {name: l}, function(reponse){alert(reponse);});
		});
});
</script>
</head>
<body>
<br />
	<a id="lang_fr" href="#">fr</a>
 
	<a id="lang_en" href="#">en</a>
 
	<a id="lang_de" href="#">de</a>
 
	<a id="lang_es" href="#">es</a>
 
</body>
</html>

après le clique ce message s'affiche :

Code:

{"error":true,"msg":"You did not enter you language."}

par contre le message affiché par la fonction de rappel affiche ceux ci :

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
{"error":false,"msg":"You've entered: fr."}<!DOCTYPE html>
<html>
<head>
<title>Post</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script language="javascript" type="text/javascript">
var l="" ;
var id_="";
$(document).ready(function() {    
		$("a").click(function (){ 
			l = $(this).html(); 
			id_=$(this).attr('id');
			alert(l);
			//alert(id_);
			//$.post("jquery.php", {name: lang})
			$.post("jquery.php", {name: l}, function(reponse){alert(reponse);});
		});
});
</script>
</head>
<body>
	<a id="lang_fr" href="#">fr</a>
	<a id="lang_en" href="#">en</a>
	<a id="lang_de" href="#">de</a>
	<a id="lang_es" href="#">es</a>
</body>
</html>

j'arrive pas à comprendre pourquoi le serveur renvois deux résultats différants pour un seul traitment :bug: bizzare non ?

29/12/2011, 11h11
Bovino

Essaye avec

Code:

$.post("jquery.php", {'name': l}, function(reponse){alert(reponse);});

Ceci dit, ta page est incorrecte : tu renvoies d'abord un objet JSON puis une page HTML complète...