Flux rss
Collection CommentCaMarche.net
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[AJAX] envoyer la requête

Annamenel, le mercredi 30 juillet 2008 à 23:45:37
Bonjour,
je suis un nouveau débutant dans le langage AJAX et je rencontre quelques problèmes à la création d'un système de vote... En gros, je veux faire un système de vote où les gens cliquent sur j'adore ou sur c'est naze pour dire ce qu'ils en pensent. Seulement, je ne sais pas trop quoi mettre dans la balise <a>...

Voilà là où je bloque :
[code html avec php (l'id est récupérée d'une base de donnée)]
<span id="valider_vote_<?php echo $donnees['id'];?>" ><a href="vote.php?voteadore&id=<?php echo $donnees['id'];?>" onClick="vote('adore', '<?php echo $donnees['id'];?>');return false;">J'adore</a> ¤ <a onClick="vote('naze', '<?php echo $donnees['id'];?>');return false;">C'est naze</a></span>

Si vous voulez mon script ajax (peut être qu'il y a une erreur) :

function vote(vote, id) {
var xhr = getXMLHttpRequest();

if (xhr && xhr.readyState != 0) {

document.location.href='vote.php?vote'+vote+'&id='+id;

}

xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {

document.getElementById('valider_vote_'+id).innerHTML = "Votre vote a été pris en compte, merci";


} else if(xhr.readyState == 2 || xhr.readyState == 3) {
document.getElementById("valider_vote_"+id).innerHTML = "<img src=\"chargement.gif\" alt=\"Chargement\"/>";
}
}


xhr.open("GET", "vote.php?vote=" + vote + "&id=" + id + "", true);
xhr.send(null);


}


Merci beaucoup :)
Configuration: Windows Vista (personne n'est parfait)
Firefox 3.0.1 (mais on se rattrape comme on peut)
Répondre à Annamenel  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Alkaaran, le jeudi 31 juillet 2008 à 14:49:52
Ou est ton problème ? 

<span id="valider_vote_<?php echo $donnees['id'];?>" >
	<a href="vote.php?vote=adore&id=<?php echo $donnees['id'];?>" onClick="vote('adore', '<?php echo $donnees['id'];?>');return false;">J'adore</a>
 	¤ 
	<a  href="vote.php?vote=naze&id=<?php echo $donnees['id'];?>" onClick="vote('naze', '<?php echo $donnees['id'];?>');return false;">C'est naze</a>
</span>
---

function vote(vote, id) {
	var xhr = getXMLHttpRequest();

	if (xhr && xhr.readyState != 0) {
		document.location.href='vote.php?vote'+vote+'&id='+id;
	}

	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('valider_vote_'+id).innerHTML = "Votre vote a été pris en compte, merci";
		} else if(xhr.readyState == 2 || xhr.readyState == 3) {
			document.getElementById("valider_vote_"+id).innerHTML = "<img src=\"chargement.gif\" alt=\"Chargement\"/>";
		}
	}

	xhr.open("GET", "vote.php?vote=" + vote + "&id=" + id + "", true);
	xhr.send(null);
}
   
Répondre à Alkaaran

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Annamenel, le jeudi 31 juillet 2008 à 15:32:14
Salut,
mon problème est que lorsque je clique sur le lien, ça m'envoie vers la page vote.php, ça exécute bien le script php mais du coup, ça ne lance pas la fonction vote.
J'utilise le procédé XMLHttpRequest et donc ça ne devrait pas changer de page.
En gros, je veux appeler cette fonction par une balise <a>
   
Répondre à Annamenel

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Alain_42, le jeudi 31 juillet 2008 à 21:19:25
C'est normal, Ajax ne fonctionne pas du tout comme ça si tu mets document.location.href=... il est logique que ça appele ta page

Va revoir les tutos qui parlent de Ajax
   
Répondre à Alain_42

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Alkaaran, le jeudi 31 juillet 2008 à 21:12:04
Normalement le return false ; devrait annuler le lien et n'executer que le JavaScript, mais pour être sûr, remplace par ceci : 
<span id="valider_vote_<?php echo $donnees['id'];?>" >
	<a href="#" onClick="vote('adore', '<?php echo $donnees['id'];?>');return false;">J'adore</a>
 	¤ 
	<a  href="#" onClick="vote('naze', '<?php echo $donnees['id'];?>');return false;">C'est naze</a>
</span>
   
Répondre à Alkaaran

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Annamenel, le jeudi 31 juillet 2008 à 22:29:54
@alain_42 : oui, c'est une erreur de ma part, un mauvais copier/coller lors de la création du script :p

@Alkaaran : j'ai essayé mais ça ne marche pas. J'ai même essayé de faire comme ça : 
<a href="javascript:vote('adore', '<?php echo $donnees['id'];?>');" >J'adore</a>


mais ça ne marche pas non plus. Peut être y-t-il une erreur dans le script ajax ?


ps : pour info, quand je clique, le return false ne marche pas car cela me change l'adresse et me mets le #
   
Répondre à Annamenel

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Alain_42, le vendredi 1 août 2008 à 10:56:06
Le principe Ajax:

suite à un évenement dans ta page (click sur un lien, sur un bouton) la fonction ajax est lancée

elle fait une requette "en arrière plan" (sans rechargement de la page)
elle appele un script php (vot.php) sur le serveur en lui envoyant des valeurs en POST 
ce script reçoit ces valeurs, tu fais le traitement que tu veux ey qd c'est fini il envoie la réponse à Ajax au navigateur du poste client

la partie traitement de la réponse à la réception, vient écrire cette réponse dans le div spécifié par l'id

Alors essayes comme ça:


ta page :
<code><html>
<head>
<script language="javascript" type="text/javascript">
function vote(url,valeur_vote,ip_client,id_ecrire){
	var http_request = false;
		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
		// lancement de la requete
		http_request.open('POST', url, true);
		//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres http_request.open('POST'....
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		
		data="valeur_vote="+valeur_vote+"&ip="+ip_client;
		//envoie des valeurs au script distant 
        http_request.send(data);
}

function traitementReponse(http_request,id_ecrire) {
	var affich="";
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
					// cas avec reponse de PHP en mode texte:
			//chargement des elements reçus dans la liste
			var reponse=http_request.responseText;
			//alert(reponse);
				obj = document.getElementById(id_ecrire); 
                obj.innerHTML = reponse;
		} 
		else {
                alert('Un problème est survenu avec la requête.');
        }
    }
}
</script>
</head>
<body>

...............
<?php
$id=$donnees['id'];
?>
<a href="javascript:vote('vote.php','adore','<?php echo $id; ?>','id_reponse');">J'adore</a><br />
<a href="javascript:vote('vote.php','naze','<?php echo $id; ?>','id_reponse');">C'est naze</a><br />
<div id='id_reponse'><!-- ici sera écrite la réponse Ajax --> </div>
</body>
</html>




et le script vote.php



<?php
//reucup valeurs envoyées
$valeur_vote=$_POST['valeur_vote']; // ça va contenir adore ou naze
$ip=$_POST['ip'];

//tu fais le traitement que tu veux, enregistrement etc..

//puis la réponse :
$reponse="Votre vote a été pris en compte, merci";
echo $reponse;

?></code>

@lain
   
Répondre à Alain_42

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Annamenel, le vendredi 1 août 2008 à 11:13:45
Merci pour ton aide Alain_42, je vais sûrement le faire par ta méthode, à quelques détails près^^
Mais sinon en fait mon script marche, je m'étais juste trompé pour l'appeler :)
Merci à tous
   
Répondre à Annamenel
Posez votre question Répondre

Résultats pour [AJAX] envoyer la requête

Pour vos problemes d'accent AJAX en Requete (Résolu) Mare des requetes AJAX qui ne marche pas avec les accent???? Dans la page qui fait appelle à la fonction ajax encoder les variable avec utf8_encode() Sur la page appelé en AJAX, avec votre editeur preferer faite enregistrer sous, regarder dans les... www.commentcamarche.net/forum/affich-7655426-pour-vos-problemes-d-accent-ajax-en-requete
[AJAX] Problème de chargement d'un formulaire (Résolu) Hello! Alors voilà mon souci: 1 - J'ai une page où se trouve un formulaire qui lui, est à l'intérieur d'un 2 - Une fois validé, le formulaire est envoyé via AJAX - son but est de traité l'information et de mettre à jour le... www.commentcamarche.net/forum/affich-3961460-ajax-probleme-de-chargement-d-un-formulaire
Passage de variable php dans ajax (Résolu) Salut, Je fais un site perso avec de l'ajax ( http://smawn.free.fr ) et je voudrais faire passer une variable php à un autre div (charger par ajax .php) sur le click d'un appellant ma fonction ajax et page php... voila je pense que... www.commentcamarche.net/forum/affich-3753091-passage-de-variable-php-dans-ajax

Résultats pour [AJAX] envoyer la requête

Envoyer des fichiers volumineux par mailEnvoyer de gros fichiers à des amis par courrier électronique n'est pas toujours facile. La plupart des serveurs de messagerie n'acceptent pas des fichiers de taille supérieure à 5 Mo. Néanmoins, il existe des solutions alternatives : Les serveurs... www.commentcamarche.net/faq/sujet-2545-envoyer-des-fichiers-volumineux-par-mail
[Langages] Envoyer un mail avec pièce jointeLes mails , tout comme les pages web, sont livrés avec des en-têtes (headers en anglais). Ces en-têtes servent à donner quelques détails necessaires comme l'adresse du destinataire, celle de l'envoyeur, la date de l'envoi, le sujet du mail... www.commentcamarche.net/faq/sujet-2761-langages-envoyer-un-mail-avec-piece-jointe
Envoyez des sms gratuitementVoici les 10 meilleurs sites pour envoyer des SMS gratuitement (ou à très bas prix) chaque jour :) Cela pourra servir à certains d'entre vous lorsque vous n'avez plus de crédits. :) 1. CallWave http://www.callwave.com Description : Vous pouvez... www.commentcamarche.net/faq/sujet-12875-envoyez-des-sms-gratuitement
1 2 3 Suivant

Résultats pour [AJAX] envoyer la requête

Javascript et Ajax: comparer des variables (Résolu)Bonjour, Voilà, pour mon identification dans un nouveau projet, j'utilise du javascript et du ajax, avec du php. Je créé un objet ajax en javascript, j'envoi mon formulaire par traitement ajax et je récupère un résultat avec javascript.... www.commentcamarche.net/forum/affich-8562361-javascript-et-ajax-comparer-des-variables
Icone de préchargement sur requete Ajax (Résolu)Bonjour, Je voudrais savoir comment intégrer une "icone de préchargement" sur une requête Ajax. Je m'explique : c'est un peu comme on fait en flash. Pendant que l'animation (lourde) se charge on affiche une barre de progression ou une... www.commentcamarche.net/forum/affich-5332857-icone-de-prechargement-sur-requete-ajax
[C++] Envoi d'une requette snmp (Résolu)Bijour, Voici mon petit probleme. Je souhaite envoyer des requettes snmp en C/C++. J'utilise deja la bibliotheque netsnmp pour faire mon sub agent, mais j'arrive pas a trouver comment faire un get. Si quelqu'un pouvait m'aider.... www.commentcamarche.net/forum/affich-1712208-c-envoi-d-une-requette-snmp
1 2 3 Suivant

Résultats pour [AJAX] envoyer la requête

AJAX (Asynchronous Javascript And XML)Introduction à AJAX AJAX (Asynchronous Javascript And XML, traduisez Javascript asynchrone et XML) est une méthode de développement web basée sur l'utilisation d'un script Javascript pour effectuer des requêtes web à l'intérieur d'une page web... www.commentcamarche.net/contents/ajax/ajax-intro.php3
ASP - L'objet RequestPrésentation de l'objet Request Le rôle de l'objet Request est de permettre de récupérer la requête HTTP envoyée par le client au serveur, c'est-à-dire qu'il permet en réalité de manipuler l'ensemble des informations envoyées par le navigateur du... www.commentcamarche.net/contents/asp/asp-request.php3
PHP - Les cookies et les en-têtes HTTPLes en-têtes HTTP Lors de chaque échange par le protocole HTTP entre votre navigateur et le serveur, des données dîtes d'en-têtes contenant des informations sur les données à envoyer (dans le cas d'une requête) ou envoyées (dans le cas d'une... www.commentcamarche.net/contents/php/phpcookie.php3
1 2 3 Suivant