Einen einfachen API-Aufruf mit jQuery getJSON

Ich versuche, einen einfachen Zufalls-Zitat Generator in Codepen zu bauen, wie Sie hier sehen können: http://codepen.io/scabbyjoe/pen/dXQmLw Einen einfachen API-Aufruf mit jQuery getJSON

Relevante Code eingefügt unter:

<html> 
    <head> 
    </head> 
    <body> 
     <h1>Random Quote Machine</h1> 
     <div class="quote"> 
     </div> 
     <div class="btn">New Quote</div> 
    </body> 
</html>

$(document).ready(function() { 
    $(".btn").on("click", function(){ 
     $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) { 
      $(".quote").html(JSON.stringify(json)); 
     }); 
    }); 
});

Ich fürchte, ich muss das getJSON-Tool missverstehen, da ich keinen Inhalt zum Laden in meinem .quote div bekommen kann.

Kann jemand erklären, warum das nicht funktioniert?

Ich bin versuchen, von dieser (separat) Beispiel zu folgen, die in der Tat funktioniert:

<script> 
    $(document).ready(function() { 

    $("#getMessage").on("click", function(){ 
     $.getJSON("/json/cats.json", function(json) { 
     $(".message").html(JSON.stringify(json)); 
     }); 

    }); 

    }); 
</script> 

<div class="container-fluid"> 
    <div class = "row text-center"> 
    <h2>Cat Photo Finder</h2> 
    </div> 
    <div class = "row text-center"> 
    <div class = "col-xs-12 well message"> 
     The message will go here 
    </div> 
    </div> 
    <div class = "row text-center"> 
    <div class = "col-xs-12"> 
     <button id = "getMessage" class = "btn btn-primary"> 
     Get Message 
     </button> 
    </div> 
    </div> 
</div>

Quelle

2016-08-09 scabbyjoe

See [ 'getJSON()' Cross-Domain-Fehler] nehmen (http://stackoverflow.com/questions/6849802/jquery-getjson-works -locally-but-not-cross-domain) für weitere Informationen –

Überprüfen Sie Ihre Konsole für Fehler:

XMLHttpRequest nicht http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en laden kann. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Ursprung 'http://s.codepen.io' ist daher nicht erlaubt.

Sie können keine AJAX-Anfragen an einen Dienst auf einem Domäne getrennt von Ihrem eigenen gehosteten machen, es sei denn sie dies ausdrücklich erlauben. Diese Nachricht zeigt an, dass dies nicht zulässig ist.

Vielleicht ist es unter bestimmten Umständen erlaubt; Überprüfen Sie ihre Dokumentation. Wenn es nicht ist, müssen Sie Proxy die Anfrage über Ihren eigenen Server. Es gibt keine Garantie, dass es auch in dieser Situation erlaubt ist. Sie müssen ihnen möglicherweise etwas wie einen API-Schlüssel bereitstellen oder zu einer Whitelist hinzugefügt werden.

Quelle

2016-08-09 03:33:48 Jacob

Schlagen Sie mich einfach dazu! –

Okay, danke Jacob, das macht Sinn, wie auch dieses einfache Beispiel kopiert fast aus der jQuery-Dokumentation funktioniert nicht: http: //codepen.io/scabbyjoe/pen/bZQrRg Also um weiter daran zu arbeiten, werde ich brauchen lokal testen? – scabbyjoe

Ja, oder versuchen Sie vielleicht, Proxy über Ihren eigenen lokalen Server. – Jacob

kann Sie die Fehlermeldung im Konsolenfeld entdecken:

XMLHttpRequest nicht http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en laden kann. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten -Ressource vorhanden. Herkunft 'http://s.codepen.io' ist daher nicht erlaubt Zugriff.

Sie sollten sicherstellen, dass api.forismatic.com die Ressource mit domänenübergreifender Berechtigung bereitstellt.

Oder Sie könnten einen Blick von jquery.ajaxcrossDomain Option

Quelle

2016-08-09 03:35:50

Einen einfachen API-Aufruf mit jQuery getJSON

Antwort

Verwandte Themen