2016-08-29 2 views
1

Ich bin ein absoluter Noob mit Web-Entwicklung und ich habe Probleme zuweisen myCountry Variable in dem folgenden Code:jsonpCallback Umfang Mühe

<html> 
<head> 
<script> 
var myCountry=" " 
function jsonpCallback(data) { 
      myCountry=data.address.country; 
      } 
jsonpCallback(); 
var countryText="You are from "+myCountry; 
     document.getElementById("displaycountry").innerHTML =countryText; 
} 
</script> 
<script src="http://api.wipmania.com/jsonp?callback=jsonpCallback" 
       type="text/javascript"> 
       </script> 
</head> 
<center> 
<p id="displaycountry" ></p> 
</body> 
</html> 

Ich möchte den Wert von data.address.country zu myCountry zuweisen und es zu verwenden, außerhalb der Funktion, aber der Wert bleibt immer "".

Die jsonpCallback Funktion zeigt das Land nur in Ordnung, wenn ich den folgenden Code verwenden (aber ich möchte die Position der es in html können, ändern):

function jsonpCallback(data) { 
      a.innerHTML ="<br/>Country: " + data.address.country; 

      } 

danke

+0

Das Problem ist nicht Ihr JSONP Rückruf, aber die Tatsache, dass Sie nicht verstehen, die asynchrone Natur dieses Anrufs. Ihre Zuordnung des Inhalts von 'myCountry' ist gerade zu früh, so dass der Callback vorher keine Zeit hatte, ausgeführt zu werden. – Sirko

Antwort

0

als @ Sirko erwähnt, das Problem ist, dass Sie nicht wirklich den Aufruf der Wipmania API machen, Sie versuchen, den Rückruf als QueryString-Parameter zu verwenden, der nicht funktioniert, indem Sie einfach die Anfrage auf das <script>-Tag setzen.

Hier ist, was Sie tun möchten.

Zuerst Sie wollen das Etikett auf Ihrer Callback-Funktion ändern, da wird alles ausgeführt werden, nachdem die Anforderung alle Daten abgerufen hat:

<p id="displaycountry"></p> 

<script> 
var myCountry = ""; 

// This is your callback function 
function jsonCallback(data) { 
    myCountry = data.address.country; 
    var countryText="You are from "+myCountry; 
    document.getElementById("displaycountry").innerHTML = countryText; 
} 

// Do the request 
// Code below 
</script> 

Weiter, was Sie tun wollen, ist tatsächlich den Anruf tätigen vielleicht auf die api, XMLHttpRequest von Javascript mit sich:

// This will stablish the Request to the api 
var xmlhttp = new XMLHttpRequest(); 
var url = "//api.wipmania.com/json"; 

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var response = JSON.parse(xmlhttp.responseText); 
     jsonCallback(response); 
    } 
}; 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

Hoffe, es hilft, für mehr Grundlagen in Javascript empfehle ich einige Online-Crash-Kurse, vielleicht Codecademy ist ein guter Anfang.

Prost