jQuery : Requête AJAX simple sur le forum Création de sites web - 25-09-2017 01:06:43

Liste des sujets

jQuery : Requête AJAX simple

yvlnr

Niveau 9

25 septembre 2017 à 01:06:43

Bonjour,
j'essaie de faire quelque chose de simple en jQuery : Parcourir un JSON depuis une requête AJAX, et à partir de là, modifier le contenu de ma balise <p class=affichage"></p> pour qu'elle contienne autant de <div> nom email</div> qu'il y en a dans le JSON.
J'ai essayé avec :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery 3</title>

</head>
<body>
  <script src="jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
  
  <p>Bienvenu sur mon site blablabla...</p>
  <p class="affichage"></p>


</body>
</html>

var $p = $('.affichage')
var $chargement = $('<div><img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt="" /><br /> Chargement...</div>').appendTo($('body'))
$.get('http://jsonplaceholder.typicode.com/users')
  .done(function(data, textStatus, jqXHR) {
    data.foreach(function (user) {
      var $div = $('<div>').text(user.name).text(user.email)
      $div.appendTo('$p')
    })
    .always(function() {
      $chargement.remove()
    })
  })

En gros, ça devrait afficher "chargement..." le temps que la requête AJAX soit faite, puis plein de couple nom + email dans la balise <p class="affichage></p>

pour votre aide

Popovitch

Niveau 26

26 septembre 2017 à 11:21:27

Ouvre la console de ton navigateur et regarde l'erreur que tu as [[sticker:p/1lm9]]

SpoilAfficherMasquer

foreach s'écrit avec un e majuscule
'$p' doit s'écrire sans quote
always est mal placé
ton code sans les points virgules ne fonctionnera pas sur tous les navigateurs

Message édité le 26 septembre 2017 à 11:24:32 par Popovitch

yvlnr

Niveau 9

27 septembre 2017 à 03:42:56

Merci beaucoup mais ça ne fonctionne toujours pas...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery 3</title>

</head>
<body>
  <script src="jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
  
  <p>Bienvenu sur mon site blablabla...</p>
  <p class="affichage"></p>


</body>
</html>

var $p = $('.affichage')
var $chargement = $('<div><img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt="" /><br /> Chargement...</div>').appendTo($('body'))
$.get('http://jsonplaceholder.typicode.com/users')
  .done(function(data, textStatus, jqXHR) {
    data.forEach(function (user) {
      var $div = $('<div>').text(user.name).text(user.email)
      $div.appendTo($p)
    })
  })
  .always(function() {
    $chargement.remove()
  })

Message édité le 27 septembre 2017 à 03:43:10 par yvlnr

Popovitch

Niveau 26

27 septembre 2017 à 11:19:29

La console te dit quoi

Chez moi ça fonctionne très bien
La seule erreur qu'il peut y avoir c'est la requête ajax qui ne voudra pas s'exécuter si ton site est en https (un site en https ne peut faire des requêtes ajax qu'avec un site en https)...
https://jsfiddle.net/uc51peky/

Aide à l'achat Mac
Création de Jeux
Linux
Programmation
Création de sites web
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News jeu

21 368 spectateurs

Les jeux indépendants cartonnent comme jamais, mais leur succès cache une industrie de plus en plus inégalitaire

Clair Obscur: Expedition 33, Hades 2, Hollow Knight: Silksong... Ces dernières années ont largement mis les jeux indépendants et les productions à budget plus modeste sous le feu des projecteurs. Et 2026 poursuit la tendance: en février dernier, Mewgenics dépassait le million de ventes en 1 semaine à peine, exploit renouvelé par Big Walk cette semaine. Des performances qui pourraient laisser croire que le secteur indépendant traverse un véritable âge d'or. Pourtant, ces réussites spectaculaires cachent un marché où devenir visible est plus difficile que jamais.

Toutes les news jeu