Bonjour,

Je débute en Ajax , j'ai essayé plusieurs tutoriel mais cela reste très très flou, c'est pour cela que j'en viens à vous demander de l'aide.
Je suis en train de créer une page où je souhaite récupérer des informations d'une base de données, selon une date sélectionnée.
Donc par exemple j'ai une table réservations, je veux afficher les réservations de tel à tel date avec un datepicker.

Je fais un formulaire avec un onclick:sendForm(); puis un id 'sdate', voila mon code JS :

 function sendForm(){
var sdate = document.getElementById('sdate').value;
console.log(sdate);
}

Je récupère bien la date que j'ai saisie.
Maintenant j'aimerais retourner cette date à mon PHP afin de pouvoir la mettre dans une variable php et la mettre dans ma requête SQL .
Je ne m'en sort pas, je ne sais pas comment m'y prendre ..
Merci pour votre aide.

5 réponses


Bonsoir.
Tu devrais visionner Tutoriel Vidéo JavaScript » Ajax.
Il ne faut pas hésiter à vérifier sur le site, si un tutoriel concernant ce que tu cherches n'existe pas déjà, avant de venir demander de l'aide sur le forum.
Cela fait quand même un certain temps que tu es inscrit sur le site, c'est quand même étonnant que tu n'ais pas fait la recherche avant.

Hello @Fa fa-dev:

Si tu veux poster des data simplement en ajax, le plus simple est de charger jQuery et de le faire avec la méthode post
=> https://api.jquery.com/jquery.post/

Si tu tiens à le faire en pur JS; regarde sur la doc mozilla Dev
=> https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest

Exemple en jquery :

// Si tu veux envoyer TOUT Le formulaire directement à PHP
$.post( "test.php", $( "#idDeTonFormulaire" ).serialize() );

// Si tu veux envoyer un objet de données
// Note que tu peux aussi passer une fonction callBack qui s'éxécutera en cas de succès (pour afficher un message par exemple)
$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

Exemple en pur JS (plus fastidieux mais plus pédagogique :) ) :
Il faut utiliser l'objet XMLHttpRequest qui dispose de plusieurs propriétés et méthodes pour faire ce que tu veux (ci-dessous du post)

// Creation de l'objet XHttpRequest
 var xhr = new XMLHttpRequest();

// Tu ouvres la connexion et tu spécifies le type en 1er param(post ou get), ton fichier url à atteindre en 2eme param et true pour l'asynchrone
  xhr.open ('post', 'test.php', /*async*/ true);

// Tu envoies les données en paramètres de la méthode send()
  xhr.send (sdate);

Tu peux évidemment aller bien plus loin avec l'objet xmlhttprequest, comme gérer l'état de la requête (de 1 à 4 entre le commencement et sa fin), ajouter des méthodes callback en cas de succès ou d'erreur.

Comme dit plus haut, si ça ne te suffit pas, cherche le tuto sur Grafikart, il y en a forcément sur Ajax ;)
La doc Mozilla developper reste "la référence" en JS mais on a souvent beoin de l'agrémenter d'exemples concrets en tuto
Côté jQuery, idem, c'est la doc jQuery :)

fa_dev
Auteur

Pouvez vous me dire si je fais une erreur ..?

  function sendForm()
{
var url ='ajax.php?date='+sdate;
 var xhr = new XMLHttpRequest();
 var sdate = document.getElementById('sdate').value ;
 xhr.open("GET", url,true);
console.log(sdate);
 xhr.send(sdate);
}
$sdate = $_GET['sdate']; 
            echo $sdate; 

Tu en fais même plusieurs.
Première, tu dois définir une variable avant de l'utiliser (sdate).
Deuxième, que fais ta variable dans le send alors que tu récupères sa valeur via un paramètre GET ?
De plus que si tu voulais l'envoyer sous forme de données de formulaire, tu t'y prends mal.

Pour finir, au lieu d'écrire le code et de nous demander si tu fais une erreur ou non, fais des tests avant.

Comme l'explique Lartak sur les erreurs je n'ai rien à rajouter :)
Je pense que tu as besoin d'explications et de mise à niveau sur les bases du code. Après ça ira tout seul;

1/ Pour rappeller une variable dans le code, encore faut-il qu'elle soit déclarée et qu'on lui ait donné une valeur "au dessus"
donc ta première ligne dans ta fonction doit être :

var sdate = document.getElementById('sdate').value ; 
// Je déclare la variable sdate qui a comme valeur l'entrée de l'input

2/ Tu as mélangé 2 choses : envoyer des valeurs via l'URL (c'est du GET), et vouloir envoyer les valeurs dans la méthode send() (c'est du POST). Tu peux faire l'un OU l'autre mais si c'est un formulaire c'est plus commun d'envoyer les valeur en POST

3/ Donc allons-y en POST :)
dans ton JS

function sendForm() {
    // Tu détermines la variable à passer ainsi que sa valeur
    var sdate = document.getElementById('sdate').value ;

    // - tu détermines l'URL qui sera appelée en Ajax
    var url ='ajax.php';
    // - Tu crées l'objet xmlhttprq
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // -Tu envoies la requête post avec les données (les clés te permettront de lesrécupérer côté PHP)
    xhr.send("maSuperVariable=sdate");
}

// MAINTENANT que ta fonction sendForm() est déclarée, il faut l'exécuter en l'appelant comme ceci
sendForm();
// OU dans un évènement de type submit, ce qui paraît logique si c'est un formulaire

dans ton PHP

// Tu récupères ta valeur en appelant la superglogbale $_POST indexée du nom que tu lui as donné
$sdate = $_POST['maSuperVariable']; 
// Tu peux afficher la valeur
echo $sdate; 

Déjà dis-moi si ça, ça fonctionne ? ;)

PS :
N'oublies pas d'ouvrir la console chrome avec F12-> onglet console... si erreur, c'est là que tu les vois ...sinon tu ne peux pas les deviner.
Si tu as besoin de plus d'infos comme par exemple déterminer les headers d'une requête si besoin, formater tes valeurs avant envoi, gérer les différents états de ta requête AJAX (de 1 à 4). Tu as un tuto explicatif ici aussi => https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/l-objet-xmlhttprequest-1