[AJAX] Transmettre plusieurs valeurs et les r'afficher.

**univscien** · 11/03/2008, 19h07

Bonjour,

Je suis en train de créer un mmorpg par navigateur et je doit lors du déplacement sur Map, récupérer plusieurs valeurs.

Il y a premièrement les coordonnés du personnage sur une grande Map mais également les coordonnés d'un autre objet sur une petite Map, mon but étant biensûr d'afficher les 2 maps une foi la requette faite.

J'effectue cette requette à l'aide de flèche directionelles faisant appel à une fonction JS. Cette fonction JS transmet une variable post en Ajax et dans mon code php si cette variable existe, je fait un echo de ce que je veux envoyer. Mais voilà; mon problème c'est que je ne voudrais pas envoyer "un texte", mais plusieurs.

Comment pourais-je faire?
En me renseignant un peu, j'ai entendu parlé d'XML, mais rien de bien concret.
Pouriez vous me donner des exemples / explications ?

Merci.

**univscien** · 13/03/2008, 18h32

Il ne me semble pas que ce que je demande soit vraiment dur... ^^'

**DoubleU** · 13/03/2008, 19h05

C'est pas non plus évident de répondre sans code pour voir ce que tu fais/cherche a faire ^^

**univscien** · 13/03/2008, 19h57

Oui je comprend, pensant que mon problème était général je n'en est pas mis. Mais si vous en voulez, en voilà...

Page php sans variable Ajax:

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
<?php
echo'
        <fieldset class="quetemap"><legend>Actions</legend>
                <fieldset><legend>Déplacement</legend><center>
                <table>
                        <tr><td colspan="3"><img src="image_outil/flechehaut.gif" alt="haut" style="cursor: pointer;" onclick="DeplaceMap(\'haut\');"/></td></tr>
                        <tr>
                                <td><img src="image_outil/flechegauche.gif" alt="gauche" style="cursor: pointer;" onclick="DeplaceMap(\'gauche\');"/></td>
                                <td><div id="minimap"><img src="Map/GrandeMap/cadrerouge.png" id="imageminimap" alt="Map" style="margin-top: '. $_SESSION['y']/30 .'px;margin-left: '. $_SESSION['x']/30 .'px;" /></div></td>
                                <td><img src="image_outil/flechedroite.gif" alt="droite" style="cursor: pointer;" onclick="DeplaceMap(\'droite\');"/></td>
                        </tr>
                        <tr><td colspan="3"><img src="image_outil/flechebas.gif" alt="bas" style="cursor: pointer;" onclick="DeplaceMap(\'bas\');"/></td></tr>
                </table>
                </center>
                </fieldset>
                <fieldset><legend>Actions</legend>
                        <div style="height: 125px;margin-left: 5px;overflow-y:auto;">
                        <br />
                        <form action="quete.php?sauver=ok" method="post"><input type="submit" style="font-size: 12px;height: 21px;" value="Sauvegarder" /></form>
                        </div>
                </fieldset>
        </fieldset>';
?>

Au clique sur une flèche, j'appel ma fonction DeplaceMap():

Fonction DeplaceMap(): (ajaxInit(); est une fonction qui initialise ajax)

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
function DeplaceMap(orientation)
 {
	ajaxInit();
	var url = "quete.php";
    var post = "orientation="+orientation;
 
    httpReq.onreadystatechange = resultatPostDeplaceMap;
 
    httpReq.open('POST', url, true);
    httpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    httpReq.setRequestHeader("Content-length", post.length);
    httpReq.setRequestHeader("Connection", "close");
    httpReq.send(post);  
    return false;
 }
 
 function resultatPostDeplaceMap()
 {
	if (httpReq.readyState == 4) {
       if (httpReq.status == 200) {
         var resultatPostDeplaceMap = httpReq.responseText;
		 $("coordMapImg").style.backgroundPosition = resultatPostDeplaceMap;
      } else {
         alert('Un problème est survenu avec la requête.');
      }
    }
 }

Je renvois l'orientation / Voir code suivant / Je récupère le texte envoyé et modifis la position du background

Page php ayant reçu la variable Ajax:

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
if (isset($_POST['orientation']))
{
session_start();
header("Content-type: image/png"); //on envoie les infos au navigateur
$img_miniMap = imagecreatefromgif("Map/GrandeMap/mapnoirblanc.gif"); //on ouvre l'image source
	if($_POST['orientation'] == "haut")
	{
	$y_mini = $_SESSION['y'] + 110 - 20;
	$x_mini = $_SESSION['x'] + 190;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['y'] -= 20;}# Si différent de noir ---> New coordoné...
	}
	elseif($_POST['orientation'] == "gauche")
	{
	$x_mini = $_SESSION['x'] + 190 - 20;
	$y_mini = $_SESSION['y'] + 110;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['x'] -= 20;}# Si différent de noir ---> New coordoné...
	}
	elseif($_POST['orientation'] == "droite")
	{
	$x_mini = $_SESSION['x'] + 190 + 20;
	$y_mini = $_SESSION['y'] + 110;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['x'] += 20;}# Si différent de noir ---> New coordoné...
	}
	elseif($_POST['orientation'] == "bas")
	{
	$y_mini = $_SESSION['y'] + 110 + 20;
	$x_mini = $_SESSION['x'] + 190;
	$rgb = ImageColorAt($img_miniMap, $x_mini, $y_mini);
	$r = ($rgb >> 16) & 0xFF; //Rouge 
	$g = ($rgb >> 8) & 0xFF; //Vert 
    $b = $rgb & 0xFF; //Bleu
	$col = $r.$g.$b;
	if($col!=000){$_SESSION['y'] += 20;}# Si différent de noir ---> New coordoné...
	}
echo '-'.$_SESSION['x'].'px -'.$_SESSION['y'].'px';
}
else
{
#Affichage de la page
}

Je test les coordoné pour s'avoir si j'incrément ou pas les variables de positions (Ne vous en occupez pas). Et je fait un echo des coordonées.

Ce que je voudrais donc c'est renvoyer par exemple les coordonés (comme ici), mais également un nombre aléatoire ou autres.
Comment pourais-je donc faire?

**DoubleU** · 13/03/2008, 23h38

T'as plusieurs façons possibles de faire en fait.

Soit tu retournes tes données dans un arbre xml , soit tu renvoies ce qu'on appelle du JSON (JavaScript Object Notation), ou encore mais c'est plus crade et déconseillé, tu écris du code javascript dans tes echos et tu fais juste eval(xhr.responseText).

Dans les deux premiers cas, il te reste juste ensuite a parser ta réponse pour récupérer tes données et en faire ce que tu veux.

Tu peux regarder ici si la lecture anglophone ne te fais pas peur ^^

**univscien** · 15/03/2008, 11h52

Merci pour la réponse. Je me suis donc renseigné (En français xD), mais j'ai du mal à imaginer une chose concrète. On pourait me donner un exemple svp ? ^^

**DoubleU** · 15/03/2008, 12h47

Un exemple avec du xml:

Code :

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

1
2
3
4
5
6
7
8
9
10
<?
   header("Content-Type: text/xml");
   ...
   $xml = "<?xml version='1.0' encoding='ISO-8859-1'?>
              <coord> 
                 <x>$_SESSION['x'] px</x>
                 <y>$_SESSION['y'] px</y>
              </coord>";
   echo $xml;
?>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 function resultatPostDeplaceMap()
 {
       if (httpReq.readyState == 4) {
            if (httpReq.status == 200) {
                 var xml = httpReq.responseXML;
                 var x = xml.getElementsByTagName("x").firstChild.nodeValue;
                 var y = xml.getElementsByTagName("y").firstChild.nodeValue;
            }
       }
 }

Je t'avoue que j'ai pas testé et que je suis pas sur que le code php marche (ca fait bien longtemps que j'en n'ai pas fait) mais l'idée est la.

**univscien** · 15/03/2008, 13h10

EDIT : Merci

Re-Edit: A quoi sert exactement firstChild.nodeValue ?
Car avec l'extension firefox, j'ai un message d'erreur: xml.getElementsByTagName is not a function
[Break on this error] var coord_Gmap = xml.getElementsByTagName("coord_Gmap").firstChild.nodeValue;

Php:

Code :

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

1
2
3
4
5
6
7
$xml = '<?xml version=\'1.0\' encoding=\'ISO-8859-15\'?>
		  <coord> 
			 <coord_Gmap>-'.$_SESSION['x'].'px -'.$_SESSION['y'].'px</coord_Gmap>
			 <coord_Mmap_x>'. $_SESSION['x']/30 .'</coord_Mmap_x>
			 <coord_Mmap_y>'. $_SESSION['y']/30 .'</coord_Mmap_y>
		  </coord>';
echo $xml;

Js:

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
function DeplaceMap(orientation)
 {
	ajaxInit();
	var url = "quete.php";
    var post = "orientation="+orientation;
 
    httpReq.onreadystatechange = resultatPostDeplaceMap;
 
    httpReq.open('POST', url, true);
    httpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    httpReq.setRequestHeader("Content-length", post.length);
    httpReq.setRequestHeader("Connection", "close");
    httpReq.send(post);  
    return false;
 }
 
 function resultatPostDeplaceMap()
 {
	if (httpReq.readyState == 4) {
       if (httpReq.status == 200) {
         var xml = httpReq.responseXML;
		 var coord_Gmap = xml.getElementsByTagName("coord_Gmap").firstChild.nodeValue;
		 var coord_Mmap_x = xml.getElementsByTagName("coord_Mmap_x").firstChild.nodeValue;
		 var coord_Mmap_y = xml.getElementsByTagName("coord_Mmap_y").firstChild.nodeValue;
		 $("coordMapImg").style.backgroundPosition = coord_Gmap;
		 $("imageminimap").style.left = coord_Mmap_x;
		 $("imageminimap").style.top = coord_Mmap_y;
      } else {
         alert('Un problème est survenu lors de la requête.');
      }
    }
 }

**DoubleU** · 15/03/2008, 14h48

Autant pour moi, j'avais oublié un truc ^^

Code :

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

1
2
 
var x = xml.getElementsByTagName("x")[0].firstChild.nodeValue;

C'est le problème avec les méthodes pour manipuler le DOM en javascript, c'est vraiment bordélique.
En fait la ligne valister tous les noeuds "x" (getElementsByTagName) dans l'arbre xml, prendre le premier élément de la liste ([0]), aller chercher le noeud texte (firstChild) et enfin chercher le texte (nodeValue)

**univscien** · 15/03/2008, 16h37

Merci, je n'est plus vraiment de problème à ce niveau, par contre, j'aimerais transmettre un formulaire et apparement il ya un problème.

Code :

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

1
2
3
4
5
6
7
8
9
10
$xml = '<?xml version=\'1.0\' encoding=\'ISO-8859-15\'?>
		  <coord> 
			<coord_Gmap>-'.$_SESSION['x'].'px -'.$_SESSION['y'].'px</coord_Gmap>
			<coord_Mmap_x>'. $_SESSION['x']/30 .'px</coord_Mmap_x>
			<coord_Mmap_y>'. $_SESSION['y']/30 .'px</coord_Mmap_y>
				<action1>'.$af.'
				<form action="quete.php?sauver=ok" method="post"><input type="submit" style="font-size: 12px;height: 21px;" value="Sauvegarder" /></form>
				</action1>
		  </coord>';
echo $xml;

Le formulaire n'est pas pris en compte.
En me renseignant un peu j'ai essayé de faire action1:form ... mais çà ne marche pas.

**univscien** · 16/03/2008, 14h24

J'ai du mal avec le formulaire... ^^'
EDIT: J'ai entouré mes balise avec <![CDATA[...]]> et çà à l'air de marcher.

[AJAX] Transmettre plusieurs valeurs et les r'afficher.

JavaScript

Discussions similaires

Partager

Partager