[Résolu] Ajax et formulaire

Salut

Mon but étant de ne pas recharger mon formulaire de recherche, en gros j'ai un champs de recherche et lorsque l'utilisateur clic sur le bouton "rechercher", une requete se lance et le resultat de la requete est afficher en dessous.

Voici les tests que je fais qui ne sont pas concluant :

HTML :

			<form id="formClientReferent" method= "post" action="../controleur/rechercherClientReferent.php">
				<label>Client référent : </label>
				<input id="idClientReferent" type="text" placeholder="NOM DU CLIENT" name="clientReferent"/>
				<input type="submit" id="btnRechercheClient" value="Rechercher"/>
				<div id="test"></div>
			</form>

le code Ajax

<script>
$(document).ready(function() {
    // Lorsque je soumets le formulaire
    $('#formClientReferent').on('submit', function(e) {
        e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
 
        var $this = $(this); // L'objet jQuery du formulaire
 
        // Je récupère les valeurs
        var pseudo = $('#idClientReferent').val();
 
        // Je vérifie une première fois pour ne pas lancer la requête HTTP
        // si je sais que mon PHP renverra une erreur
        if(pseudo === '') {
            alert('Les champs doivent êtres remplis');
        } else {
            // Envoi de la requête HTTP en mode asynchrone
            $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                data: $this.serialize(), // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
                success: function(html) { // Je récupère la réponse du fichier PHP
                    alert(html); // J'affiche cette réponse
                }
            });
        }
    });
});
</script>

le fichier rechercherClientReferent.php

	if( isset($_POST['clientReferent']) ){
		$query = 'SELECT id_personne FROM tb_personne WHERE nom_personne like :clientReferent ;';	
		$resultat = $connection->prepare($query);
		$resultat->bindParam (':clientReferent',$_POST['clientReferent']);
		$resultat->execute();
		$client = $resultat->fetchAll();
		if(!empty($client))
		{
			$_SESSION['rechercheClient'] = true;
			$_SESSION['resultatRechercheClient'][$client];
			echo 'Success';
		}
		else {
			$_SESSION['rechercheClient']  = false;
			echo 'Fail';
		}
    }else{
		echo 'pas dans le if';
	}

Le probleme c'est qu'il ne passe rien a part que la page se recharger, deja je ne veux pas qu'elle se recharge, ensuite je sais pas trop comment " debugger " le tout .
Merci de l'aide.
Modifié par JENCAL (26 Sep 2014 - 14:32)

J'ai modifier le script et ça fonctionne :

<script>
	$(document).ready(function() { //attend le chargement de la page pour executer le script 
		$("#formClientReferent").submit(function () {//form désigne l'ensemble des formulaires
			$.post("../controleur/rechercherClientReferent.php",$(this).serialize(),function(texte){
			//(this).serialize() récupère l'ensemble des donnés traité du formulaire EN COURS
			$("div#test").append(texte);//affiche après traitement le résultat dans la div "status"
			});
			return false; // permet de ne pas recharger la page 
		}); 
	}); 
</script>

Bonjour.

Pour bloquer la soumission tu dois rajouter un "return false;" à la fin de ton on('submit') .

Ensuite pour débugger, je te conseillerais d'ajouter un callback d'erreur sur ta requête Ajax :

error : function(request, error) {
          console.error(error')
}