Discussion :

[Draakh]

Bonjour à tous ! Je me suis mis à l'AJAX dans le cadre d'un stage pour créer une petite appli web.

Mes premier essais se sont révélés concluant, j'arrive à communiquer avec le serveur et à récupérer des données sans recharger ma page. Mais lorsque je veux renouveler l'exploit : problème ! Je m'explique.

J'ai, dans mon formulaire HTML, un bouton qui appelle la fonction search() lorsqu'on clique dessus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="search()">Chercher</button>

Voici la fonction search() en question :

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
function search()
{
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function()
    {
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            // On se sert de innerHTML pour rajouter les options à la liste 
            leSelect = xhr.responseText;
            document.getElementById('resultats').innerHTML = leSelect;
        }
    }
 
    // Ici on va voir comment faire du post
    xhr.open("POST","ajaxSearch.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    var sel = document.getElementById('categorie');
    numCat = sel.options[sel.selectedIndex].value;
    xhr.send("numCat="+numCat);
    alert("Test");
};

Je précise que la fonction getXhr() (qui permet de récupérer l'objet XMLHttpRequest) fonctionne.

Ma fonction search() est censée envoyer des données avec la méthode POST à ma page ajaxSearch.php, qui les traite ensuite. Comme cela ne fonctionnait pas, j'ai simplement mis un alert() dans ajaxSearch.php pour voir si elle était bien appelée, mais l'alert ne s'affiche pas...

Si quelqu'un a une réponse à m'offrir, je suis preneur

D'avance merci !

[andry.aime]

Salut,

1- Pour vérifier si la fonction est appelé, mais l'alert au début mais pas à la fin.
2- Tu peux nous montrer ton code HTML associé?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if(xhr.readyState == 4 && xhr.status == 200)
        {
            // On se sert de innerHTML pour rajouter les options à la liste 
            leSelect = xhr.responseText;
            document.getElementById('resultats').innerHTML = leSelect;
        }

Utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
if(xhr.readyState == 4 )
{
if (xhr.status == 200 || xhr.status == 0)
        {
            // On se sert de innerHTML pour rajouter les options à la liste 
            leSelect = xhr.responseText;
            document.getElementById('resultats').innerHTML = leSelect;
        }
else
       {
            alert( "Erreur : " + xhr.status + " " + xhr.statusText);
        }
}

A+.

[Draakh]

Arf, j'ai finalement trouvé d'où venait le problème, j'avais changé le nom du ficher sur lequel je travaillais, et en avait créé un autre à la place...
Enfin bref, merci quand même pour ton aide, ça m'a permis de corriger certaines erreurs

J'ai également un problème récurrent, c'est que lorsque mon code s'exécute, la page s'actualise d'elle-même à la fin, sais-tu comment empêcher ça ?

[Bovino]

C'est normal : une balise <button> à l'intérieur d'un formulaire est par défaut de type submit. Du coup, quand tu cliques dessus, le code JavaScript est exécuté puis le formulaire est soumis sans attendre le retour de la requête.

[Draakh]

D'accord, dans ce cas existe-t-il un contrôle qui n'actualise pas la page mais qui permette une validation de la part de l'utilisateur ?

Merci pour vos réponses