[AJAX] Lancer une page Ajax via un formulaire et un javascript

Version imprimable

10/04/2008, 19h13
ccsuperstar

[AJAX] Lancer une page Ajax via un formulaire et un javascript

Bonjour à tous,

Je dois réaliser un script pour un vote via un lien html, et je dois le faire en ajax et javascript à cause du cache sur le site.
Voici mon brief

Citation:

En cliquant sur un bouton/picto de notation "utile" ou "inutile" un javascript est déclenché.

Le javascript lance une page en ajax avec en parametre url l'id de l'avis.

La page lancée par l'ajax :

- vérifie si un avis n'a pas déjà été inséré pour cette id d'avis, ce jour et avec cette adresse ip

L'ajax doit récupérer le contenu de la page qui doit retourner false si un vote a été trouvé et true dans le cas contraire.

Si un enregistrement est trouvé une alerte javascript avertit l'internaute qu'il y a déjà eu un avis déposé dans les dernières 24H.

Si ce n'est pas le cas, un enregistrement est placé dans la table `avis_note`.
Il contient l'id de l'avis, le type (produit/service), la date & heure, l'ip de l'internaute et son vote (utile/inutile)
Une alerte javascript remercie l'internaute pour son vote.

Pour le formulaire soumis par un lien html et un onclick="monform.submit();", c'est bon, mais après je bloque.

Si vous avez des idées

Merci d'avance
11/04/2008, 10h24
DoubleU

En fait, tu ne devrais pas utiliser de formulaire mais plutôt un onclick sur ton bouton/picto qui déclencherait une requête Ajax contenant l'avis que l'utilisateur veut tenter d'ajouter.

Coté serveur, tu récupères l'avis, fait les traitement qui vont bien et renvoie en guise de réponse true ou false selon le cas. Ensuite, quand javascript récupère la réponse à sa requête Ajax, tu affiches ton alert en conséquence.

Si tu n'as jamais fait d'Ajax, commence par lire un des tutos du site (ex celui la) et ce que tu cherches a faire va subitement devenir limpide ^^

Merci pour ta réponse

Effectivement ça m'ide. J'ai pris l'exemple 1 qui me parait être le plus proche de ce que je veux faire mais il y a juste une partie où je ne sais pas quoi mettre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function ajax() { var xhr=null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //on appelle le fichier reponse.txt xhr.open("GET", "http://gael-donat.developpez.com/web/intro-ajax/reponse.txt", false); xhr.send(null); alert(xhr.responseText); }
dans le xhr.open, je place mon fichier avec des variables en parametres que je passe dans la fonction

Mais pour le alert, je ne sais pas par quoi remplacer le responseText...

11/04/2008, 11h46
funkyy

Salut

En fait à la place de http://gael-donat.developpez.com/web/intro-ajax/reponse.txt , tu va mettre le lien vers un fichier PHP.

Dans ton fichier PHP tu fais les requêtes qui vont bien et tu place dans un echo ce que tu veux renvoyer au script. Le script traitera la valeur renvoyée par la valeur de xhr.responseText .

Le premier argument de xhr.open te dit la méthode utilisée pour appeler le fichier PHP et le troisième te dit si c'est en mode synchrone ou non.

tu vois ?

J'ai fait comme ca

fichier .js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function ajax(avis_id,note) { var xhr=null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //on appelle le fichier reponse.txt xhr.open("POST", "www4/include/modules/valid_vote.php?avis_id='avis_id'&note='note'", false); xhr.send(null); alert(xhr.responseText); }
Dans mon fichier php, j'ai des echo, mais lorsque je clique sur mon lien

Code:

<a href="#" onclick="javascript:ajax(\''.$avis_id.'\',\'inutile\');" class="lien-bleu">Avis inutile</a>

je n'ai rien dans mon alerte, alors que j'ai fait un echo 'test' dans mon fichier php....

Ca peut être le lien de mon fichier .php qui est mauvais?

11/04/2008, 12h28
DoubleU

Il te manque le callback sur onreadystatechange

comment ca?

J'ai ca

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ajax(avis_id,note,type)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on appelle le fichier reponse.txt
    xhr.open("GET", "www4/include/modules/valid_vote.php?avis_id='avis_id'&note='note'&type='type'", true);
    xhr.send(null);
 
    alert(xhr.responseText);
}

quand je lance le fichier php directement, je récupère bien les infos que je dois avoir

Il me manque cette ligne?

Code:

1
2
//on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };

11/04/2008, 13h40
DoubleU
Oui, sauf que bizarrement dans le tuto il manque une partie de cette fonction.

onreadystatechange est appelé à chaque fois que la requete change d'état (requete créée, envoyée, traitée, etc). Le flag qui te permet de savoir dans quel état tu te trouve est readyState .

Comme en général, on veut récupérer le résultat une fois la requete traitée (et pas avant :lol:), on fait :
Code:

1 2 3 4 xhr.onreadystatechange = function() { if (xhr.readyState == 4) alert_ajax(xhr); };
On peut aussi restreindre le traitement suivant si la reponse est ok ou pas grace au flag status

merci pour toutes ces infos. J'y suis presque, mais je bloque sur un probleme de pur javascript.

Ma fonction a 3 parametres, l'avis_id, le type de vote, et le type de produit
Dasn l'url du fichier que j'appelle ,j'ai donc mis ces parametres, mais il passe le texte, pas les valeurs
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 function ajax(avis_id,note,type) { var xhr_object=null; if (window.XMLHttpRequest) { xhr_object = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } //on appelle le fichier reponse.txt xhr_object.open(\'GET\', \'../include/modules/valid_vote.php?avis_id=avis_id&note=note&type=type\', true); xhr_object.send(null); xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) alert(xhr_object.responseText); } }
mon lien

Code:

<a href="#" onclick="javascript:ajax2(\''.$avis_id.'\',\'inutile\',\''.$type.'\');" class="lien-bleu">Avis inutile</a>';

et dans mes requetes, je me retrouve avec SELECT... WHERE avis_id=avis_id

Qu'est ce qui n'est pas correct?

11/04/2008, 16h18
funkyy

/!\ jdébute aussi en ajax

xhr_object.open(\'GET\', \'../include/modules/valid_vote.php?avis_id=avis_id&note=note&type=type\', true);
==>
xhr_object.open("GET", "../include/modules/valid_vote.php?avis_id="+avis_id+"&note="+note+"&type="+type, true);

Il y aussi la manière d'appeler ta fonction dans <a href ...> mais je suis pas super callé là-dessus je préfère me taire haha
11/04/2008, 16h29
DoubleU

Code:

xhr_object.open('GET', 'valid_vote.php?avis_id=' + avis_id + '&note=' + note + '&type=type', true);

Sinon, il net met pas les parametres...

PS: j'ai enlevé les \ pour que ca soit plus clair, je sais pas si elles doivent rester ou non
11/04/2008, 16h42
funkyy

Non non on rajoute \ pour que l'apostrophe qui suit ne soit pas interprétée. C'est pas le cas, donc soit ' soit " seulement.
16/04/2008, 10h13
ccsuperstar

Merci pour vos conseils. J'ai réussi à faire ce que je voulais.
Mais j'ai une demande particulière...
A la place d'une fenêtre alerte, il faudrait que je puisse ouvrir une pop-up personnalisable niveau design (car j'ai cherché des scripts pour personnaliser une alert, j'ai trouvé mais je n'ai pas réussi à le faire marcher avec ma fonction ajax)...

Donc j'imagine qu'au lieu de mettre

Code:

if(xhr_object.readyState == 4) alert(xhr_object.responseText);

il faut que je change le alert par une autre fonction

Merci pour votre aide
16/04/2008, 18h58
funkyy

Yo!
Ba une fois que t'es bien rentré dans le if(xhr.readyState == 4){ ... } , c'est que tu ne touches plus à l'objet xhr, le serveur étant prêt...tu fais donc du pur javascript. Donc fais des tuto de JS ! (je t'aurai répondu si je savais haha).
Bon taff.

:google: