2014-02-11 4 views
7

Ich versuche, JSON-Daten von einer Website zu sammeln, die von einem Unternehmen gehostet wird. Ich bin nicht auf der gleichen Domain, also kann ich nicht einfach darauf zugreifen. Von den Headern scheint es, dass sie auch CORS nicht verwenden. Also habe ich versucht, JSONP zu verwenden, um die Daten zu analysieren, aber es scheint nicht zu funktionieren. Ich habe versucht, $ .getJSON und $ .ajax zu tun, aber diese werfen Fehler und rufen die Funktion nicht auf. Dies ist meine bisherige Lösung, und in der Antwort vom Server werden die Daten immer noch nicht in getResults eingebunden.Verwenden von JSONP zum Abrufen von JSON-Daten von einem anderen Server

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<script type="text/javascript" src="jquery/js/jquery-1.9.0.min.js"></script> 

<script> 
function getResults(data) { 
    console.log(data[0].name); 
} 
</script> 
<script type='text/javascript' src='https://solstice.applauncher.com/external/contacts.json?callback=getResults'></script> 

Ich bin ziemlich neu in HTML, JavaScript und jQuery, also bin ich gerade wirklich verwirrt, warum die Antwort in der Funktion und Konsolenprotokoll isn gewickelt wird arbeite nicht. Jede Hilfe wäre willkommen.

+0

Die angegebene URL ruft keine Funktion auf, sondern gibt nur Daten zurück. Es ist nicht für einen JSONP-Aufruf vorgesehen. – lincolnk

Antwort

2

JSONP ist eine Technik, mit der Sie Ihre Anfrage in eine Skript-URL eingeben (die jeder Domain erlaubt ist), und Sie übergeben dieser URL einen Parameter, der den Namen einer Funktion angibt, die das resultierende Skript sein soll Zurück zum Anruf und übergeben Sie Ihre Daten. In diesem Fall sieht es so aus, als würden Sie angeben, dass die Callback-Funktion den Namen getResults hat.

Damit JSONP funktioniert, muss der Server, an den Sie die Anfrage senden, diese speziell unterstützen, da ein bestimmter Antwortformtyp erforderlich ist und jede Domäne eines beliebigen Browsers die Anfrage erstellen kann, die nicht von allen Websites gewünscht wird ermöglichen.

Also, die allererste Sache, die Sie herausfinden müssen, ist, wenn der Server, von dem Sie Daten anfordern, JSONP unterstützt oder nicht, und wenn ja, stellen Sie sicher, dass Sie genau verstehen, wie die Antwort formatiert wird und wie sie das erwartet Callback-Funktion zu spezifizieren (allgemeine Konvention ist mit der callback=xxx URL-Parameter, aber es muss nicht so gemacht werden.

Wenn der Server, den Sie wollen Daten von JSONP nicht unterstützt, dann können Sie einfach nicht verwenden JSONP, um Daten von ihm zu erhalten.Wenn es keine andere domänenübergreifende Anforderungsstrategie unterstützt, dann können Sie keine Daten von ihm über eine Browser-Webseite erhalten und müssen die Anfrage von etwas anderem als einem Browser (wie einem anderen) machen Server)

+0

Wie würde ich herausfinden, ob der Server JSONP unterstützt? – user3299416

+0

@ user3299416 - Sie müssen in der Dokumentation für die API dieser Site nachsehen, um zu sehen, was sie unterstützt. Möglicherweise müssen Sie die Anfrage auch auf eine bestimmte Weise ausführen, damit sie weiß, dass Sie JSONP eingeben möchten. – jfriend00

1

JSONP ist eine Methode, die der Server implementieren muss.

Wenn Sie sicher sind, dass der Server JSONP akzeptiert und versteht, ist möglicherweise der Parameter, den Sie zum Übergeben des Rückrufnamens verwenden, nicht callback. Sehen Sie ihre Dokumentation, wenn sie eine haben.

Andernfalls können Sie einfach nicht die JSON-Daten von einem Browser abrufen.

0

Live-Probe aus here:

JSONP - JSON mit Polsterung, das heißt.Javascript-Objekt in einem Rückruf eingewickelt, in unserem Fall jsonCallback ist

dies ist Inhalt der Datei:

jsonCallback(
    { 
     "sites": 
     [ 
      { 
       "siteName": "JQUERY4U", 
       "domainName": "http://www.jquery4u.com", 
       "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; Code Snippets." 
      }, 
      { 
       "siteName": "BLOGOOLA", 
       "domainName": "http://www.blogoola.com", 
       "description": "Expose your blog to millions and increase your audience." 
      }, 
      { 
       "siteName": "PHPSCRIPTS4U", 
       "domainName": "http://www.phpscripts4u.com", 
       "description": "The Blog of Enthusiastic PHP Scripters" 
      } 
     ] 
    } 
); 

Code für eine Datei abrufen:

(function($) { 
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?'; 

$.ajax({ 
    type: 'GET', 
    url: url, 
    async: false, 
    jsonpCallback: 'jsonCallback', <-- callback here 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(json) { 
     console.dir(json.sites); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
}); 

})(jQuery); 
+1

Ich bekomme diesen Fehler: 'Uncaught SyntaxError: Unerwartetes Token:' – Si8

5

Sie viele Möglichkeiten, können aber Die zwei bequemsten sind entweder ein AJAX-Aufruf oder die Verwendung der jQuery-Methode getJSON()

mit Ajax

$(document).ready(function() { 
    $(".btn").click(function() { 
    $.ajax({type: "get", 
      url: "http://api.forismatic.com/api/1.0/", 
      data: {method: "getQuote",format: "jsonp",lang: "en"}, 
      dataType: "jsonp", 
      jsonp: "jsonp", 
      jsonpCallback: "myJsonMethod" 
    }); 
    }); 
}); 
function myJsonMethod(response){ 
    console.log (response); 
} 

Bei dem obigen Verfahren nennt response Object all JSON Daten von dem API-Aufruf hat.

Mit getJSON()

$(document).ready(function() { 
    $(".btn").click(function() { 
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?"); 
    }); 
}); 
function myJsonMethod(response){ 
    console.log (response); 
} 

Bei dem obigen Verfahren das gleiche passiert.

HINWEIS -> JSONP übernimmt den Namen der Callback-Funktion, an die die Antwort gesendet werden soll.

+0

in Ihrem ersten Beispiel "Ajax Call verwenden", verwenden Sie Typ: "POST". JSONP ist nur für GET-Anfrage. JSONP verhält sich wie ein

Verwandte Themen