Bonjour,
Je viens vers vous car j’aimerais avoir quelques conseils et des explications au sujet de l’ajax.
J’apprends, doucement mais sûrement, à créer des pages internet mais j’ai toujours des soucis avec le javascript. En l’occurrence, je bloque particulièrement sur l’ajax et je ne parviens pas à comprendre ce qui coince, en dépit des tonnes de ressources, de cours et de conseils déjà présent sur le net.
(Je vous prie de m'excuser pour la longueur mais j'aime autant être exhaustif. Je mets le code dont je parle ici en fin de pavé).
Enfin, passons. Je vous situe un peu le contexte :
Mon projet comporte quatre éléments : une page index.html, une page traitement.php, une page script.js et enfin une table au sein d’une base de donnée SQL.
L’enjeu est d’afficher un formulaire sur la page index.html qui permet d’effectuer une recherche dans la base de données et d’afficher sur cette même page le résultat de la recherche.
Ainsi, la recherche se fait via la page traitement.php qui reçoit les données du formulaire et sélectionne les joueurs qui correspondent au critère via une requête préparée. Une boucle while permet ensuite d’afficher le résultat de la requête.
Mais voilà ! Le résultat de la recherche s’affiche sur la page traitement.php et l’utilisateur est redirigé vers cette page pour consulter le résultat.
Or, j’aimerais que l’utilisateur ne soit pas redirigé vers cette page et qu’au contraire ce soit le résultat de la recherche qui soit injecté dans une div prévue à cet effet, dans la page index.html.
Je vous mets ce que j’ai pu écrire jusqu’à présent, peut-être que quelqu’un saura identifier le problème.
La page HTML:
La page PHP:
Enfin, il y a la page JS (ici j’utilise jQuery) :
Notez que la ligne 2 : « event.preventDefault(); » empêche bien la redirection vers la page traitement.php.
Pour autant, les données ne transitent pas vers la div prévue à cet effet dans ma page index.html.
J'en conclue que c'est la partie contenue dans $.ajax() qui pose problème.
Qu’en pensez-vous ?
Comment pourrais-je modifier ce code pour que la recherche s'effectue comme je l'entends ?
Merci d’avance !
Modifié par redMonkey (19 Sep 2019 - 21:58)
Je viens vers vous car j’aimerais avoir quelques conseils et des explications au sujet de l’ajax.
J’apprends, doucement mais sûrement, à créer des pages internet mais j’ai toujours des soucis avec le javascript. En l’occurrence, je bloque particulièrement sur l’ajax et je ne parviens pas à comprendre ce qui coince, en dépit des tonnes de ressources, de cours et de conseils déjà présent sur le net.
(Je vous prie de m'excuser pour la longueur mais j'aime autant être exhaustif. Je mets le code dont je parle ici en fin de pavé).
Enfin, passons. Je vous situe un peu le contexte :
Mon projet comporte quatre éléments : une page index.html, une page traitement.php, une page script.js et enfin une table au sein d’une base de donnée SQL.
L’enjeu est d’afficher un formulaire sur la page index.html qui permet d’effectuer une recherche dans la base de données et d’afficher sur cette même page le résultat de la recherche.
Ainsi, la recherche se fait via la page traitement.php qui reçoit les données du formulaire et sélectionne les joueurs qui correspondent au critère via une requête préparée. Une boucle while permet ensuite d’afficher le résultat de la requête.
Mais voilà ! Le résultat de la recherche s’affiche sur la page traitement.php et l’utilisateur est redirigé vers cette page pour consulter le résultat.
Or, j’aimerais que l’utilisateur ne soit pas redirigé vers cette page et qu’au contraire ce soit le résultat de la recherche qui soit injecté dans une div prévue à cet effet, dans la page index.html.
Je vous mets ce que j’ai pu écrire jusqu’à présent, peut-être que quelqu’un saura identifier le problème.
La page HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<form action="traitement.php" method="GET" id="formulaire">
<select name="categorie">
<option value="Attaquant"></option>
<option value="Defenseur"></option>
<option value="Gardien"></option>
</select>
<input type="submit" value="Envoyer" id="envoyer">
</form>
<div id="affichage"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>La page PHP:
<?php
header('Content-Type: text/html; charset=utf-8');
try
{
$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
if(isset($_GET['categorie']) && !empty($_GET['categorie'])){
$rep = $bdd->prepare('SELECT * FROM joueurs WHERE categorie = ?');
$rep->execute(array($_GET['categorie']));
while ($donnees = $rep->fetch())
{
echo $donnees['nom'];
}};
?>Enfin, il y a la page JS (ici j’utilise jQuery) :
$("#envoyer").click(function(){
event.preventDefault();
$.ajax({
url : 'traitement.php',
type : 'GET',
dataType : 'html',
success : function(reponse, statut){
$(reponse).appendTo('#div');
},
error : function(resultat, statut, erreur){
alert('erreurJS');
},
complete : function(resultat, statut){
}
});
});Notez que la ligne 2 : « event.preventDefault(); » empêche bien la redirection vers la page traitement.php.
Pour autant, les données ne transitent pas vers la div prévue à cet effet dans ma page index.html.
J'en conclue que c'est la partie contenue dans $.ajax() qui pose problème.
Qu’en pensez-vous ?
Comment pourrais-je modifier ce code pour que la recherche s'effectue comme je l'entends ?
Merci d’avance !
Modifié par redMonkey (19 Sep 2019 - 21:58)
