Formulaire de recherche en AJAX
Bonjour à tous
Dans le cadre de mon projet de BTS, je dois réaliser un site web qui permet de suivre des personnes géolocalisées sur Google Maps et dont leur position est enregistrée dans une base MySQL. Pour cela, avant de pouvoir afficher la position, je dois créer une fonctionnalité de recherche qui permet d'afficher la liste de ces personnes qui pourront être ensuite sélectionnés.
Et c'est justement là que je bloque car je n'ai aucun mal à le faire en php mais mon projet me l'impose en AJAX dont j'ai très peu de connaissances.
Je me suis donc renseigné sur le sujet mais j'avoue avoir du mal.
Jusqu'ici j'ai une page .php qui me sert à afficher les données reçues comme suit :
Code:
1
2
3
4
5
| <form class="ajax" method="post">
<input id="TxtRecherche" type="text" name="recherche">
<input type="submit" value="Recherche" name="BtnRecherche" id="recherche"><br/><br/>
<div id="scrollbar" style="width:100%;height:250px;overflow:scroll;"><br/></div>
</form> |
Ensuite mon fichier php (ListCoureur.php) qui fait la connexion à la bdd :
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <?php
if(isset($_POST['data']) && $_POST['data']) {
// Récupérer la valeur des données reçues en POST
$dataJson = $_POST['data'];
$dataArray = array();
$dataArray = json_decode($dataJson, true);
// Récupérer les valeurs passées en Json
$recherche = $dataArray['data'];
//Création du tableau php (2 dimensions) pour la valeur de retour
$listeValRetour = array();
// Connexion à MySQL
$connexionBDD = mysql_connect("127.0.0.1", "spectateurs", "spectateurs");
if ($connexionBDD != false){
//connexion à MySQL réussie
//Sélection d'une base de données
$selectionBDD = mysql_select_db("bdd_runnertracking");
if($selectionBDD != false){
mysql_query("SET NAMES UTF8");
//select toutes les tables order by nom
$requeteSQL = "SELECT idUser, nom, prenom, dossard FROM runner_user WHERE "
. " nom LIKE '%" . $recherche . "%' OR prenom LIKE '%" . $recherche
. "%' OR dossard LIKE '%" . $recherche . "%' ORDER BY dossard ASC " ;
$jeuEnregistrement = mysql_query($requeteSQL) ; //envoi de la requête
if ($jeuEnregistrement != false){
//Parcourir le résultat enregistrement par enregistrement
while ($unEnregistrement = mysql_fetch_assoc($jeuEnregistrement)) {
//Création d'un tableau php (1 dimension) pour un enregistrement
$arrayLigne = array(
"idUser" => $unEnregistrement["idUser"],
"nom" => $unEnregistrement["nom"],
"prenom" => $unEnregistrement["prenom"],
"dossard" => $unEnregistrement["dossard"]
);
//Ajout de l'enregistrement php dans le tableau de retour.
array_push($listeValRetour, $arrayLigne) ;
}
mysql_free_result($jeuEnregistrement);// Libération du jeu d'enregistrements
}else{
//traitement
}
}
// Fermeture de la connexion
mysql_close($connexionBDD);
}
}
//renvoyer en JSON
//----------------------------------------------------------------
$valRetourJson = json_encode($listeValRetour);//PHP 5 >= 5.2.0
echo $valRetourJson;
?> |
Et enfin le fichier js (ajax-afficherCoureur.js) qui récupère en ajax les données reçues :
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
38
39
40
41
42
43
44
45
46
47
48
49
| $(document).ready(function(){
$("#recherche").click(
function(){
var recherche = $("#TxtRecherche").val();
LireListeCoureur(recherche);
});
// url relative au service web
var urlWS = 'ListCoureur.php';
function LireListeCoureur(prmRecherche){
// création de l'url d'accès à la méthode du service web
var composedUrl = urlWS;
// prmRecherche = document.getElementById('')
var parametres = "data="+prmRecherche ;
// envoi de la requete
$.ajax({
url: composedUrl,
data: JSON.stringify(parametres),
type: "POST",
//contentType: 'application/json; charset=utf-8',
success: onLireListeCoureurSuccess, // méthode appelée lors de la réception des données
error: onLireListeCoureurError // méthode appelée s'il y a une erreur
});
}
function onLireListeCoureurSuccess(reponse){
// convertit l'objet json reponse en objet javascript
var objJSReponse = eval(reponse);
// nbC = nombre d'élements dans la réponse
var nbC = objJSReponse.length;
// listeC = liste des coureurs récupérés
var listeC;
var text = '<table>' + '<tr><th></th><th>Nom</th><th>Prenom</th><th>Dossard</th><th>#</th><th>Checkpoint</th></tr>';
for(var i = 0; i<nbC ; i++) {
listeC[i] = new Array(objJSReponse[i].nom,objJSReponse[i].prenom, objJSReponse[i].dossard, objJSReponse[i].rang, objJSReponse[i].temps);
text += '<tr>';
text += '<td><input type="checkbox" name="add"></td>';
text += '<td>'+objJSReponse[i].nom+'</td>';
text += '<td>'+objJSReponse[i].prenom+'</td>';
text += '<td>'+objJSReponse[i].dossard+'</td>';
text += '<td>'+objJSReponse[i].rang+'</td>';
text += '<td>'+objJSReponse[i].temps+'</td>';
text += '</tr>';
}
text += '</table>';
$("SelectionCoureur").html(text);
}
function onLireListeCoureurError(erreur){
alert(erreur.satusText);
}
}); |
Le problème est qu'après exécution, j'ai un message d'erreur m'affichant "La page à l'adresse LocalHost est undefined", pourtant l'url est bien la bonne.
Ensuite autre problème, lorsque la méthode success est appelée, je ne récupère rien dans la reponse.
Je pense que ma deuxième erreur vient du fichier php mais je ne sais pas ou. Pour la première l'url est bien la bonne donc là je suis vraiment à cours d'idées :s
Je précise que dans ma base j'ai une table runner_user qui contient la liste des personnes que je dois afficher avec leur nom, prenom et dossard.
Merci d'avance pour vos réponses.
