J'ai une API GET qui me donne le résultat suivant :

enter image description here

Le code suivant essaie d'obtenir ces informations JSON :

<script>
   jQuery(document).ready(function ($)
   {       
      $.ajax({
         url: 'http://localhost:15840' + '/totem/GetRestaurants',
         type: "GET",
         dataType: "jsonp",
         crossDomain: true,
         complete: function (data)
         { 
            alert (data)
            for (var restaurant in data)
            {
               document.getElementById('restaurants').innerHTML = '<li class="gallery-image" > <a href="3.html" class="thumb"><img src="img/restaurante-02.jpg" alt="" /><div class="gallery-text"><span>FOOD RESTAURANT</span></div></a></li >'
             }   
          },
          error: function () {
             alert("error");
          }
       });
    });
</script>

La méthode d'erreur est toujours exécutée et l'alerte complète affiche simplement les informations suivantes :

enter image description here

Mais si je vais à Chrome Inspector, la réponse semble bonne :

enter image description here

enter image description here

Pourquoi cela arrive-t-il?

ÉDITER:

Avec le code suivant, rien ne se passe :

<script>
    jQuery(document).ready(function ($)
    {       
        $.ajax({
            url: 'http://localhost:15840' + '/totem/GetRestaurants',
            type: "GET",
            dataType: "jsonp",
            crossDomain: true,
            success: function (data)
            {
                alert ("hello success")
            }
        });
    });
</script>
-1
Lechucico 19 mars 2019 à 14:35

2 réponses

Meilleure réponse

Tu as dit:

dataType: "jsonp",

… mais la capture d'écran de la réponse montre qu'il s'agit de JSON et non de JSONP.

Vous devez soit:

  1. Réglez le dataType sur "json"
  2. Modifiez le serveur pour répondre avec JSONP (voir Qu'est-ce que JSONP, et pourquoi qu'il a créé ? pour plus d'informations à ce sujet).

Notez que JSONP est un hack sale et dangereux pour contourner la politique de même origine et que nous avons maintenant CORS (qui est un moyen bien standardisé et flexible pour désactiver sélectivement la politique de même origine qui n'a pas les inconvénients de JSONP). Alors n'allez pas avec l'option 2.


Vous avez peut-être essayé d'utiliser dataType: "jsonp" car vous avez une erreur comme :

XMLHttpRequest ne peut pas charger l'en-tête XXX No 'Access-Control-Allow-Origin'

Cette erreur se produit parce que vous enfreignez la politique de même origine. JSONP est un moyen de contourner ce problème, CORS est un meilleur moyen. Ces deux méthodes nécessitent que le serveur soit modifié pour leur permettre de fonctionner.

Voir cette question pour Plus d'information.

1
Quentin 19 mars 2019 à 11:46

Lorsque vous envoyez la requête jsonp, vous devez modifier la façon dont vous retournez les données. vous devez envelopper votre objet JSON dans $_GET['callback']. si votre backend était en php, vous pouvez essayer le code suivant

 $response['data'] = array('sdu');
 $response = json_encode($response);
 echo htmlspecialchars($_GET['callback']) . '(' . $response . ')';
 exit;
0
Sumit Parkash 19 mars 2019 à 11:52