[AJAX] Appeller une page php en Ajax pour action sur Mysql

Bonjour,

J'aimerais pouvoir gérer mon admin en AJAX, j'ai réussi à créer l'interface en php, principalement de la gestion de base de donnée (supprimer,déplacer ...)

mais le rechargement systématique de la page aprés chaque action prend trop de temps pour ce que je veus faire.

J'aimerais donc simplement pouvoir appeller une page php en AJAX sans avoir à recharger ma page.

Voici mon code actuel :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php if ($_GET['date'] != NULL) { // envoi vers demande $date = $_GET['date']; mysql_connect("localhost", "root", ""); mysql_select_db("mabase"); mysql_query("INSERT INTO corbeille SELECT * FROM demande WHERE date='$date'"); // suppresion mysql_query("DELETE FROM demande WHERE date='$date'"); mysql_close(); Header('Location: affiches.php'); } else { Header('Location: affiches.php'); } ?>

---

Pour faire l'action j'ai simplement créé un lien :
<a href="supprimer.php?date=<?php echo $donnees['date']; ?>" title="">Supprimer</a>

Est-il donc possible de faire la même chose en AJAX, j'ai beau chercher de partout, je ne trouve pas comment faire simple ... :oops:

En fait ton lien ne doit plus appeller une page php mais ta fonction ajax.

Fais le ainsi:

Code:

---

1 2	<a href="#" onclick="supprimer('<?php echo $donnees['date']; ?>')">Supprimer</a>

---

Après, tu créer une fonction javascript supprimer() auquel tu passe la date en paramètre :

Code:

---

1 2 3 4 5

function supprimer(date) { /*ici tu créer ton objet XmlHttpRequest et tu fait appel à ta page php grâce à la méthode open (tu passe ta date en mode GET (1er paramètre), avec une url du style "supprimer.php?date="+date (2eme paramètre), en asynchrone (le 3eme paramètre à "true"), tu envoie ta requete (send) et tu traite la réponse*/ }

---

Pour la création de l'objet XmlHttpRequest et son traitement, tu applique ce que tu verras dans n'importe quel tutorial ajax. fais des essais, ca devrait marcher !

Salut,

J'ai suivi tes explications mais au lieu de faire l'action dérisé j'ai un message d'erreur :bug:

voici se que j'ai mijoté ^^

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// Code JavaScript function supprimer() { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url="supprimerajax.php"; // le script à appeller // fonction à exécuter dès réception de la réponse xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") alert(xmlHttp.responseText); //on affiche ce que le serveur renvoie } xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.send(null); return true; } </script>

---

et dans ma page effacer.php

<?php
if ($_GET['date'] != NULL)
{
// envoi vers demande
$date = $_GET['date'];
mysql_connect("localhost", "root", "");
mysql_select_db("eckopland2");
mysql_query("INSERT INTO corbeille SELECT * FROM demande WHERE date='$date'");
// suppresion
mysql_query("DELETE FROM demande WHERE date='$date'");
mysql_close();


J'ai du faire une erreur mais où ????

ps: J'ai peu tout de même profiter d'ajax pour le message d'erreur lol

Salut,

Quel est le message d'erreur ?

Premièrement, je remarque tu envoie "null" à ta page php

Code:

---

xmlHttp.send(null);

---

donc ton code ne s'exécutera pas.

Deuxièment, dans ta page php, tu ne renvoie rien.
Pour renvoyer quelque chose, il faut faire un "print ...".

Peut être que ton erreur vient de là que dans lorsque tu ne renvoie rien responseText renvoie null.

Alors plusieurs remarques sur ton code :

déjà, pourquoi tu met une url "supprimerajax.php" si ton fichier s'appelle "effacer.php"?

De plus n'oublies pas de faire passer la variable date en paramètre dans ton url : genre :

Code:

---

1 2	var url="supprimerajax.php?date"+date;

---

de même n'oublie pas de faire passer en date dans ta fonction supprimer() :

Code:

---

1 2	function supprimer(date)

---

ensuite dans l'ordre tu dois faire appel à xmlHttp.open (pour appeller la page php), puis à xmlHttp.onreadystatechange (la tu fais la fonction traitant la réponse), et enfin à xmlHttp.send(null) (laisse le null, c'est bien).

dans ta fonction correspondant à ton onreadystatechange, fais plutot ainsi :

Code:

---

1 2 3 4 5 6 7 8

if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } }

---

Cela dit, effectivement ça n'affichera rien car ton fichier php ne fait aucun affichage. Mais tes opérations sql devraient être réalisées.

Si t'as toujours une erreur, tiens moi au courant.

Salut,

Merci de votre aide, j'ai suivi vos indications, j'ai donc codé sa :

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 28 29

<script type="text/javascript"> // Code JavaScript function supprimer(date) { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url="supprimer.php?date"+date; // le script à appeller // fonction à exécuter dès réception de la réponse xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } } xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.send(null); return true; } } </script>   <a href="#" onclick="supprimer('<?php echo $donnees['date']; ?>')">Supprimer</a>

---

Mais mon lien ne répond plus :aie:
Je ne comprend vraiment pas, ma base de donnée ne bouge pas, c'est si dur que sa !!!

Si vous avez la moindre idée ??? :roll:

Ton lien ne répond pas ? Tu veux dire que tu n'a pas ton message d'alerte (responseText).

Essaie de mettre à la place de alert(xmlHttp.responseText), alert("ok");

Essaie aussi de mettre à la place <a href="#" onclick="supprimer('<?php echo $donnees['date']; ?>')">Supprimer</a>,

<a href="#" onclick="supprimer('uneDate')">Supprimer</a> où une date est une date présente dans ta base.

Cela te permettra de voir d'où vient le problème.
Bon courage

remplace tout simplement cette ligne :

Code:

---

var url="supprimer.php?date"+date;

---

par cette ligne :

Code:

---

var url="supprimer.php?date="+date;

---

(avec un "=" )

Voila je viens de le faire mais sa ne marche toujours pas et j'ai aucun message d'erreur sur firefox ??? :cry:

Dans la console d'erreur non plus il n'y a rien ?

Met la méthode open avant la méthode onreadystatechange !

Code:

---

1 2 3 4 5 6 7 8 9 10

xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } }

---

J'ai réussi !! :yaisse2: Merci de votre aide !!

Par contre :aie: je dois recharger ma page pour avoir mon résultat donc c'est bien mais l'AJAX n'a plus trop de sens :?

Comment faire pour ne pas à avoir recharger la page ???

Voila mon code QUI MARCHE :

<script type="text/javascript">
// Script pour suppresion AJAX

function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
objXMLHttp=new XMLHttpRequest();
else if (window.ActiveXObject)
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
return objXMLHttp;
}

function supprimer(pseudo)
{
var xmlHttp = GetXmlHttpObject();
if (xmlHttp == null){
alert("Votre navigateur ne supporte pas les requêtes HTTP.");
return false;
}
var url="include/supprimera.php?pseudo="+pseudo; // le script à appeller
xmlHttp.open("GET", url, true);//envoi en GET asynchrone
xmlHttp.send(null);
// fonction à exécuter dès réception de la réponse
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
alert("ok");
}
}
return true;
}
alert(pseudo);
}
</script>

<a href="#" onclick="supprimer('<?php echo $donnees['perso_pseudo']; ?>')">Supprimer</a>

<?php
}

Petite parenthése :

J'ai tenter de faire un style sur mon bouton pour annoncer que l'action php appelé par javascript à bien été réalisé, a fin de savoir ce qui à été fait dans mon admin.

seulement le style marche mais il s'applique que sur la derniere fiche de ma base de donnée :roll: Oui je suis compliqué !!

En clair j'ai sa à la fin de mon code javascript :

Code:

---

1 2 3 4 5 6 7 8 9 10

xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200){   } } return true; } document.getElementById("<?=$pseudo?>") .className="vert"; }

---

Avec en style css :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.rouge { visibility: visible; font-size : 200%; background-color: #C61800; width: 300px; height: 40px; }   .vert { visibility: visible; font-size : 200%; background-color: #1B7302; width: 300px; height: 40px; }

---

Et enfin mon bouton (stylé)

Code:

---

<div><a href="#" id="<?php echo $pseudo ?>" class="rouge" onclick="supprimer('<?php echo $donnees['perso_pseudo']; ?>')">supprimer</a></div>

---

Quand je clique tout marche au niveau de ce que je veus faire avec PHP, mais mon style (sur le bouton) ne s'applique pas sur le bouton concerné mais sur le dernier de la liste.

Pour être plus clair dans mon admin j'ai la représentation de ma base de donnée avec aprés un lien SUPPRIMER et j'aimerais que mon style ne s'applique qu'au lien concerné.

Mon probleme est vraiment pas facile à expliquer !! ?? j'espere que vous aurez compris, sinon ... et bien je re explique

Si j'ai bien compris, si ta page d'admin tu as une liste d'éléments et après chaque élément il y a un bouton supprimé.

Tes éléments tu les charges par une boucle en php du style

Code:

---

1 2 3

for(....) print $liste[$i]. "bouton supprimer";

---

La variable perso_pseudo à la même valeur que l'id ?
Si c'est le cas tu peux directement utiliser le paramètre pseudo_perso dans ta fonction supprimer et faire document.getElementById(pseudo_perso)....

Voilà je suis pas sûr t'avoir été bien clair :?

Salut

En faite ma boucle commence comme sa :

Code:

---

1 2	while ($donnees = mysql_fetch_array($reponse) ) {

---

Et j'affiche chaque donnees comme sa :

Code:

---

Date : <?php echo $donnees['date']; ?><br>

---

Je ne vois vraiment pas comment faire donc, il faudrait que chaq'un de mes DIV soit unique en faite, associé a mon bouton SUPPRIMER ????

j'ai réussi a rendre l'id de mes div unique (reprenant le pseudo de leur fiche) mais sa ne marche toujours pas et dans ma source les div sont pourtant bien unique :(

Mes div :

Code:

---

<div class="vert" id="<?=$pseudo?>">Veuillez patienter...</div>

---

Mon get element ID :

Code:

---

document.getElementById("<?=$pseudo?>").className="rouge";

---

Mon code JAVA :

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 28 29 30 31 32 33 34 35 36 37

<script type="text/javascript"> // Script pour suppresion AJAX   function GetXmlHttpObject() { var objXMLHttp = null; if (window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest(); else if (window.ActiveXObject) objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); return objXMLHttp; }   function supprimer(pseudo) { var xmlHttp = GetXmlHttpObject(); if (xmlHttp == null){ alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url="include/supprimera.php?pseudo="+pseudo; // le script à appeller xmlHttp.open("GET", url, true);//envoi en GET asynchrone xmlHttp.send(null); // fonction à exécuter dès réception de la réponse xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200){   } } return true; } document.getElementById("<?=$pseudo?>").className="rouge";   }   </script>

---

Je rappelle que l'ensemble est contenu dans une boucle while ($donnees = mysql_fetch_array($reponse) )

Maintenant quand je clique sur le bouton concerné, il affiche le style que sur la derniere fiche mais pas sur la fiche ou j'appuit ?????

:traine:

et pourquoi ne pas mettre directement

document.getElementById(pseudo).className...

Merci :yaisse2: Sa marche !!!! mikaoul à trouvé c'était tout simple mais j'ai mis plus de 3h à chercher .... comme quoi :king:

:resolu: