Bonjour tout le monde,

J'espère que le titre est clair, je ne pouvais écrire "sans recharger la page".

alors voilà... J'ai des difficulté à maîtriser l'ajax.

J'essaie de créer une page qui permettrait d'effectuer une recherche sur la bdd, via un formulaire.

Le résultat doit s'afficher sur la page dans laquelle se trouve l'utilisateur. Facile, me direz-vous ? Mais voilà, j'aimerais que tout cela se fasse sans rafraîchir la page lorsque je clique sur le bouton "submit".

Pour parvenir à faire cela, j'ai cru comprendre que je devais utiliser l'ajax. J'essaye donc d'appliquer ce que j'ai pu lire sur cette méthode mais ça coince et je ne comprend pas où.

Pour plus de clarté, on peut illustrer mon soucis avec quelques bouts de code.

Pour la table:

Elle liste des sportifs selon leur catégorie. Ainsi, on un champ 'id', un champ 'nom' et un champ 'categorie'.

Une entrée peut avoir pour categorie: "offensif", "defensif" ou "general".

Pour le code HTML, il affiche un formulaire POST permettant de faire une choix parmi les catégorie, ainsi qu'une div dans laquelle est sensée s'afficher la réponse.

A l'origine ça devait être une page.html mais avec tous les tests et les essaies que j'ai fait, elle a finit par devenir une page.php

Je le précise au cas où, je ne sais pas si cela à une incidence ?

<form action="traitement.php" method="POST" id="formulaire">
  
    <select name="categorie">
        <option value="offensif">Offensif</option>
        <option value="defensif">Defensif</option>
        <option value="general">General</option>
    </select>
    <input type="submit" value="Envoyer">
</form>

<div id="div"></div>

Côté PHP, on a une requête préparée qui va chercher les données dans la table selon la catégorie choisie par le visiteur.

Le code PHP se trouve sur une page.php et non sur la page où le visiteur effectue sa recherche.

try
{
	$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}

if(isset($_POST['categorie']) && !empty($_POST['categorie'])){
$rep = $bdd->prepare('SELECT * FROM joueurs WHERE categorie = ?');
$rep->execute(array($_POST['categorie']));
	while ($donnees = $rep->fetch())
{
	echo $donnees['nom'];
}};

Et.. nous y voilà, la partie Javascript:

Ce que j'ai écris n'a probablement aucun sens mais je vous invite à jeter un coup d’œil à ceci, peut-être que vous saurez identifier ce qui m'échappe

 document.getElementById("formulaire").addEventListener("submit", function(e){
    e.preventDefault();
   
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {
          // console.log(this.readyState);
           document.getElementById("div").innerHTML = this.response;
        } else if (this.readyState == 4 && this.status != 200) { alert ('erreur JS');}
   
   };
    xhr.open("POST", "traitement.php", true);
    xhr.send();
});

Hello !

Personne pour m'aider à y voir plus clair ?

RDNOCK a écrit:

Hello !

Personne pour m'aider à y voir plus clair ?

Bonjour,

Alors tu dois séparer ton code PHP qui fait la requête dans une seconde page donc "page.php" si je me trompe pas dans ton cas , tu fais une requête AJAX sur cet page et tu récupére le contenu de cet page.

Ensuite tu affiche ce résultat dans ta div "id" je suppose.

Je ne vois pas le problème à comprendre ça ?

console.log(xhr.responseText);

Pour voir ce que renvoie ta requête.

Bonjour,

 > Je ne vois pas le problème à comprendre ça ?

Là où ça coince, c'est la pratique. Je ne parviens pas à faire passer les données de ma page.php à celle où se trouve la div "id" (ou plutôt la div "div" dans mon exemple, mais je pense qu'on parle de la même).

Lorsque je teste "console.log(xhr.responseText);" la console affiche:

Une ligne vide avec simplement écrit: "ax.js 7:18" à droite de la ligne.

ax.js étant le nom de mon fichier javascript.

Je ne sais pas si ça à une importance mais l'onglet réseau affiche:

La deuxième colonne, "méthode" affiche GET, alors que le formulaire est en POST. Je ne sais pas si tout cela est bien normal ?!

-
Edité par RDNOCK 19 septembre 2019 à 12:52:33

RDNOCK a écrit:

Bonjour,

 > Je ne vois pas le problème à comprendre ça ?

Là où ça coince, c'est la pratique. Je ne parviens pas à faire passer les données de ma page.php à celle où se trouve la div "id" (ou plutôt la div "div" dans mon exemple, mais je pense qu'on parle de la même).

Lorsque je teste "console.log(xhr.responseText);" la console affiche:

Une ligne vide avec simplement écrit: "ax.js 7:18" à droite de la ligne.

ax.js étant le nom de mon fichier javascript.

Je ne sais pas si ça à une importance mais l'onglet réseau affiche:

La deuxième colonne, "méthode" affiche GET, alors que le formulaire est en POST. Je ne sais pas si tout cela est bien normal ?!

-
Edité par RDNOCK il y a 2 minutes

Le script qui récupère les données dans la base de donnée est "page.php" ou "traitement.php" ?

Si c'est "page.php" alors ton ajax ne fait pas une requête au bonne endroit.

xhr.open("POST", "traitement.php", true);

Après je vais être honnête, j'utilise plus souvent jQuery pour faire de l'ajax qui est clairement plus simple,

mais regarde si ca ne vient pas de çà déjà ou précise moi si je me trompe.

La page s'appelle en réalité "traitement.php", je l'appelais "page.php" juste pour préciser qu'elle était sous ce format.

Effectivement, ça a l'air beaucoup plus simple en jQuery et j'ai l'impression qu'il y a beaucoup plus de documentations, de tutos, de vidéos.. sur l'Ajax avec jQuery plutôt qu'en pur Javascript.

Je voulais tenter de maîtriser cette méthode en pur JS histoire de ne pas dépendre d'une bibliothèque. Mais voilà, ça fait trois jours que je bloque là dessus, je crois que je vais finir par me tourner vers jQ ou VueJS... enfin tout ce qui pourrait simplifier ce maudit langage

Bonjour , j'ai trouvé cette page de documentation sur l'ajax https://www.w3schools.com/js/js_ajax_http_send.asp

qui indique pour une requête de type POST de definir un en tête sur xhr avant l'appel a xhr.send et après l'appel à xhr.open

xhr.open("POST", "traitement.php" , true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

// le paramétre dans send sont les données envoyé dans la

// requête en POST au serveur de l'autre côté existe
// $_POST['fname'] ; $_POST['lname']  ;
// si j'ai bien compris ...

-
Edité par SamuelGaborieau3 20 septembre 2019 à 3:09:18