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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 php : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.