11548 sujets

JavaScript, DOM et API Web HTML5

Problème de variable pour Ajax

Pages :
Bonjour,


Je suis un novice dans la programmation Web ... =)
Je fais un site pour le travail (je suis alternant à Alcatel) et je voudrais le rendre dynamique grâce à l'ajax sauf que j'ai vraiment du mal à comprendre oO. On a pu me donner une piste mais ça marche pas et je voudrais éviter de demander tous les jours un truc mais la je sais vraiment pas ...
Bref j'ai ça:


Fichier Php:

$top_country_name_1 = Top_country("2011", 10);	

	if (isset($_GET["trainings"])){
		$train = $_GET["trainings"]; 
		echo $train; 
	}




La fonction Top_country me permet d'avoir le meilleur pays ... ici c'est sur j'obtiens France


Fichier Html:

<!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>ajax</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		$.ajax({
		  url: 'data.php?trainings=top_country_name_1',
		  success: function(data) {    
			alert('Load was performed.');
				$('#zoneaafficher').html('top1=' + data);
		  }
		});
		}); 
	</script>
</head>

<body>
	<p id ="zoneaafficher">		
	</p>

</body>
</html>



Je voudrais donc afficher la valeur "France" grâce à l'ajax sauf qu'ici ca affiche .... "top_country_name_1"


Donc pourriez vous m'indiquer où est le problème svp ?
Modifié par InfoGeo (02 Feb 2012 - 10:19)
Avec php, tu peux créer un formulaire caché dans lequel tu insères ta valeur que tu pourras récupérer avec JS.

$top_country_name_1 = Top_country("2011", 10);
echo '<input type="text" id="nomPays" value="' + $top_country_name_1 + '" />'
// Récupération de la valeur
var top_countr_name_1 = document.getElementById('nomPays').value;

Modifié par Gothor (02 Feb 2012 - 10:28)
merci pour ta réponse

Mais la c'est un exemple bidon que j'ai donné pour m'apprendre à utiliser l'ajax .... =) Mon but est d apprendre à l'utiliser donc evidemment je pourrais utiliser un autre moyen ou carrément inclure le fichier php dans le fichier html grâce à un include (ce que je fais pour le moment) mais maintenant je voudrais faire un site dynamique en ajax
Modérateur
sinon le problème de ton code c'est que tu envoie en get au php "trainings=top_country_name_1", que tu récupère cette valeur dans ton fichier php et que tu l'affiche sans utiliser le contenu récupéré par ta fonction Top_country.

En fait pour faire ce que tu veux, dans le php tu dois juste avoir
print Top_country("2011", 10);


du coup dans le js, pas besoin d'envoyer une variable (dont on ne se sert pas...)

$.ajax({
    url: 'data.php',
    success: function(data) {    
       alert('Load was performed.');
      $('#zoneaafficher').html('top1=' + data)
    }
});
Merci mais, imaginons que c'est pas la seule variable que je veux retirer du fichier php, comment va t il reconnaitre laquelle afficher à quel endroit si j'ai juste un print pour chaque variable ? =)
Au temps pour moi, je n'avais pas bien compris la question.

Pour récupérer plusieurs variables, tu peux aussi récupérer un fichier JSon qui sera renvoyé par php.

Je n'ai jamais utilisé JQuery, mais ça devrait donner quelque chose comme...

PHP :
$var1 = "coucou";
$var2 = "le";
$var3 = "monde";
echo '{';
    echo '"var1":"'.$var1.'",';
    echo '"var2":"'.$var2.'",';
    echo '"var3":"'.$var3.'",';
echo '}';
JS :
var var1;
var var2;
var var3;

$.ajax({
    url: 'data.php',
    dataType : 'json';
    success: function(data) {
        var1 = data.var1;
        var2 = data.var2;
        var3 = data.var3;
    }
});

Modifié par Gothor (02 Feb 2012 - 11:01)
Modérateur
Edit: gothor, ça donne ça en effet

à ce moment là tu envoie effectivement une variable et tu t'en occupe dans le php, comme par exemple, meilleur pays par année:


$year = 2012;
if (isset($_GET['year'])) {
  $year = $_GET['year];
}

print Top_country($year, 10);




// p.s: les variables peuvent être envoyée directement dans l'url ou par data(plus propre) mais le résultat est le même
$.ajax({

    url: 'data.php',
    data: {year: 2009},
    success: function(data) {    

       alert('Load was performed.');

      $('#zoneaafficher').html('top1=' + data)

    }

});


Au final, sans entrer dans le "vrai" ajax avex xml ou json, une version simple comme ici consiste à:
1) Envoyer une requête à une page, avec des variables en GET ou en POST.
2) dans cette page php, traiter les données traditionnellement.
3) Effectuer des print ou echo pour afficher ce que l'on veut.
4) Le javascript récupère ce contenu brut et dans ton cas, l'insère dans une div.

pour débugger ce système, il suffit déjà de se rendre rendre sur la page (data.php?myvar=blablabla' ) pour voir ce que recevra le javascript.
Modifié par kustolovic (02 Feb 2012 - 11:05)
Cool, alors au final j ai fait ça:


url: 'data.php',
data:{country: 10},
success: function(data) {    
alert('Load was performed.');
$('#zoneaafficher').html('top1=' + data);
}


et donc:

if (isset($_GET["country"])){
		$country = $_GET["country"];
		print Top_country("2011", $country);
	}


Donc ca l air de marché, en gros le 10 c pour le nom du pays 1, le 20 pour le nom du pays 2, le 30 .... et apparement ca me met bien france ... germany ...

par contre c'est vrai que la c'est une autre solution de ce que moi j'avais donné (qui marchait pas certes XD) mais j aurais bien voulu savoir pourquoi ca marchait pas dans mon exemple qu esce qu il aurait fallu changer pour que ca marche quoi
A et une autre question

Pour le data ici j ai :
data:{country: 10},


puis je mettre plusieurs valeurs ?
exemple:
data:{country: 10, year: 2012, month: april},


svp ?
Je n'ai pas bien compris la première question...

Cela n'affichait pas le pays que tu voulais car ce qui se passait c'est :
- Appel de la page data.php avec des paramètres:
url:'data.php?trainings=top_country_name_1'

- data.php reçoit le paramètre $_GET['trainings'] = 'top_country_name_1' (la chaîne de caractères), c'est bien ce que tu lui as envoyé...
- Après ça :
[b]// Une variable php récupère le pays voulu[/b]
$top_country_name_1 = Top_country("2011", 10);
	[b]// Si $_GET["trainings"] existe (et il existe, il vaut 'top_country_name_1')[/b]
	if (isset($_GET["trainings"])) {
		[b]// $train = 'top_country_name_1'[/b]
		$train = $_GET["trainings"];
		[b]// afficher $train, soit 'top_country_name_1'[/b]
		echo $train;
	}


Tu peux mettre toutes les données que tu veux dans data. Toutefois, attention, tu as mis : 
data : {month : april}
Il faut des quotes pour indiquer à JS que tu envoies du texte (sinon il va chercher une variable april.
data : {month : 'april'}

Modifié par Gothor (02 Feb 2012 - 11:33)
mais en fait moi ce que je voulais c'est qu il soit égal à la valeur de la variable : top_country_name_1 (cette variable étant égale à France) mais la il va pas chercher la valeur de ce que je lui met, il fait que d afficher ce que j ai mis, pourtant c'est ce qu'on m a dit à mon travail, c'était un piege mdr ?

par exemple si je met ca:
'data.php?trainings=Top_country("2011", 10)'

je veux pas qu il affiche betement: Top_country("2011", 10), mais france (vu que cette fonction permet d avoir France)

Smiley bawling
Si tu veux qu'il prenne la valeur de top_country_name_1, dans ton JS il faudrait que tu fasses quelque chose du style:

var top_country_name_1 = 10; // Ici, j'initialise, mais tu la récupères comme tu veux...
$.ajax({
    url: 'data.php',
    data : {country : top_country_name_1}, [b]// Va récupérer la valeur de top_country_name_1[/b]
    success: function(data) {
        // ... exécution du code
    }
});


En fait, il faut faire la différence entre:
var variable = "coucou";
var objet = {url : 'data.php?trainings=variable'}
[b]// Ici, trainings reçoit la chaîne "variable", pas la valeur de la variable [#brown]variable[/#][/b]
et
var variable = "coucou";
var objet = {url : 'data.php?trainings=' + variable}
[b]// Ici, trainings reçoit la valeur de la variable [#brown]variable[/#], soit la valeur "coucou"[/b]

Modifié par Gothor (02 Feb 2012 - 11:54)
ha okkkkk tout ca a cause d'un + XD

Bah merci c'est cool bon evidemment ce que je veux faire est plus compliqué mais je préfère connaitre les bases avant hein XD
Hem, cela n'est plus dû au plus qu'au positionnement des quotes.

Il faut bien comprendre que variableTest est différent de 'variableTest'.
oui je pense avoir compris maintenant =)

merci les mecs c'est cool =)
par contre maintenant je rebloque, mais bon je savai déjà que j'alais ravoir un probleme c'est juste que je voulais pas le mettre dans le meme topic vu que c'est pas la meme chose, c'est pour ca que j en ai créé un autre =)

En tt cas merci encore
Bon en fait heuu .... XD

Ce que je comprend pas encore une fois c'est comment je fais pour aller chercher une valeur en particulier parce que avec la technique la:


$year = 2012;
if (isset($_GET['year'])) {
  $year = $_GET['year];
}
print Top_country($year, 10);




// p.s: les variables peuvent être envoyée directement dans l'url ou par data(plus propre) mais le résultat est le même
$.ajax({
    url: 'data.php',
    data: {year: 2009},
    success: function(data) {
       alert('Load was performed.');
      $('#zoneaafficher').html('top1=' + data)
    }
});



Et bien je peux récupéré qu une valeur ... dans mon fichier data.php, j ai plein de fonctions en fait, et par exemple j ai cette fonction:
function Nbr_int_ext ($nom, $year, $month, $country)


Et donc on peut voir qu elle a quelques arguments .... Si je fais un print de cette fonction en ayant mis des valeurs aux arguments au préalable (dans le data :{})
Mais que j ai aussi toujours mon print Top_country($year, 10);

Du coup j aurai deux print dans le meme fichier et du coup au final dans $('#zoneaafficher').html('top1=' + data), il va plus savoir quoi afficher non ?

Dsl c'est peut etre pas tres clair ......
Modifié par InfoGeo (02 Feb 2012 - 16:39)
Coucou,

Pour récupérer plusieurs variables du script que tu appelles avec ton ajax, tu dois stocker ces variables dans un tableau, par exemple :

$resultat = array();

$resultat['year'] = $year;
$resultat['nom'] = $nom;

// Autant de fois que tu souhaites récupérer des données avec ton js


Ensuite, il va falloir encoder ton tableau en JSON, de cette manière :


// Une fois que tu as bien rempli ton tableau

print json_encode($resultat)


Et enfin, dans ton ajax :


$.ajax({

    url: 'data.php',

    [b]dataType : "json",[/b]  //Tu spécifies le type de données récupérées

    data: {year: 2009},

    success: function(json) {  // Tu récupère en paramètre, l'objet JSON récupéré

       alert('Load was performed.');

      $('#zoneaafficher').html('top1=' + json['year']);
      $('#zoneaafficher2').html('top2=' + json['nom']);  // Tu parses tes données

    }

});


Je sais pas si c'était le sujet de ta question mais j'espère que ça pourra t'éclairer Smiley cligne
Modifié par Seyu (02 Feb 2012 - 17:04)
merci pour la réponse mais bon un peu complexe pour moi ^^

alors déja ou que c'est qu on met:

$resultat = array();
$resultat['year'] = $year;
$resultat['nom'] = $nom;

print json_encode($resultat)


??? dans le fichier html ou php ? et si c est dans le fichier html je met donc des balise <?php ?>, non ?

ensuite heu si j utilise deja du jquery, je peux faire pareil avec le jquery il y a beaucoup de chose qui change ? au lieu d utiliser le json
Modifié par InfoGeo (02 Feb 2012 - 17:08)
Pages :
Sujet clos
Aller à