Récupérer et afficher des données

**Matteo53** · 08/10/2022, 11h38

Bonjour,
je viens de commencer d'apprendre et de comprendre l'AJAX en m'aidant de cours et video etc.
J'essaie un exercice mais je n'arrive pas à trouver l'erreur : quand je clique sur une des deux villes, dans la div en sous je voudrais afficher le code de la page php.. mais rien se passe
Voici mes codes :

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
 function getxhr()
 {
    return new XMLHttpRequest(); 
 }
 
 
let links = document.querySelectorAll('.meteo')
let result =document.querySelector('result')
 
for(let i = 0; i < links.length; i++) {
   let link = links[i]
   link.addEventListener('click', function (e) {
      e.preventDefault();
      result.innerHTML="chargement"
 
      let req = getxhr();
 
      req.onreadystatechange = function()
      {
         if(req.readyState==4 && req.status==200)
         {
         result.innerHTML=req.responseText;
         }
      }
 
         req.open('GET', this.getAttribute('href'), true);
 
         req.send();
 
      })
}

Mon html

Code html :

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

1
2
3
4
5
6
7
8
<body>
    <ul>
     <li><a class="meteo" href="ville.php?ville=Paris">Paris</a></li>
     <li><a class="meteo" href="ville.php?ville=Rennes">Rennes</a></li>
    </ul>  
    <div id="result"></div>
    <script src="monApp.js"></script>
</body>

php

Code php :

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

1
2
3
4
<?php 
$ville =$_GET['ville'];
echo 'il fait beau a '.$ville;
?>

merci pour votre aide

**mathieu** · 08/10/2022, 12h07

regardez dans la console de développement de votre navigateur, vous avez une erreur javascript.

une fois que vous aurez corrigé cette erreur, l'appel ajax fonctionnera. mais si vous voulez pousser l'exercice un peu plus loin, je vous propose de ne plus utiliser XMLHttpRequest mais de refaire l'appel ajax avec la fonction fetch :
https://developer.mozilla.org/fr/doc...PI/Using_Fetch
cette fonction est plus récente et je pense que votre code sera plus clair en l'utilisant.

**Matteo53** · 08/10/2022, 13h02

Bonjour,
La prochaine fois je ferai appel à la console avant de poster sur le forum, en étant débutant je n'ai pas ce reflexe.
Problème résolu sur les deux lignes:

Code :

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

1
2
3
 
let result =document.getElementById("result")
result.innerHTML="chargement"

Merci pour votre conseil je vais lire la documentation sur cette fonction.
Bonne journée

Récupérer et afficher des données

AJAX

Vue hybride

Discussions similaires

Partager

Partager