Ajax /php problème de POST

sff · 27 Décembre 2006

J'ai un problème assez compliqué à expliquer. Je vais faire le plus simple possible.

J'ai actuellement une page php assez simple avec 3 bouton input dans un form:

Code:

<form action="?page=deplacement" method="post">
<input name="south" type="image" title="Aller en bas" class="no_bordure" onclick="go()" src="images/carte/bouton-bas.gif"/>
</form>

En fait mon but, c'est lorsque l'on clique sur un bouton, faudrait ne pas recharger la page entièrement, mais juste un contenu.

Donc pour cela j'ai mi le contenu de ma page dans un calque:

Code:

<div id="carte">

<form action="?page=deplacement" method="post">
<input name="south" type="image" title="Aller en bas" class="no_bordure" onclick="go(1)" src="images/carte/bouton-bas.gif"/>
</form>

</div>

et un peu de javascript dans le <head>:

Code:

function getXhr(){
					var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Le site disfonctionnera."); 
	   xhr = false; 
	} 
					return xhr;
}
function go(){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		// Tout est ok ?...
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('carte').innerHTML = leselect;
		}
	}

[b]Le problème: [/b]
	xhr.open("POST","?page=deplacement",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send(null);
}

Le problème: En fait comme je vous l'ai expliqué plus haut, jj'aimerai que lorsque l'on clique sur un bouton input, il y es bien le formulaire qui joue son jeu, mais sans recharger la page.

Donc je sais pas comment m'y prendre avec cette ligne dans le javascript:

xhr.open("POST","?page=deplacement",true); dans le cas actuel ca m'affiche dans la div la page du site en entier.

Jeviensderio · 27 Décembre 2006

Ce qu'il me semble c'est que la fonction Ajax affiche la page courante avec un paramère. C'est normal qu'elle soit rechargée en entier.
Il faudrait peut-être créer un fichier XML ou JSON pour avoir des données à intégrer à la page.
C'est en tout cas ce que je fais habituellement.

sff · 27 Décembre 2006

tu peux m'expliquer comment tu fais?

nico2006 · 27 Décembre 2006

salut;
remplace
<input name="south" type="image" title="Aller en bas" class="no_bordure" onclick="go()" src="images/carte/bouton-bas.gif"/>

par
<img title="Aller en bas" class="no_bordure" onclick="go()" src="images/carte/bouton-bas.gif"/>

et tu n'aura plus de soumission donc plus de rechargement de la page

sff · 27 Décembre 2006

Oui mais j'ai besoin du name, il me sert pour les requetes après avoir actionné le bouton

Jeviensderio · 1 Janvier 2007

La fonction POST a pour but d'envoyer des données au serveur. Le paramètre send() contient les données en question.

Si j'ai bien compris le but de l'exemple, il faut utiliser GET, et l'appel de la méthode setRequestHeader devient inutile.

Cela devrait marcher.