jsonpCallback范围麻烦

时间:2016-08-29 15:26:43

标签: json variables scope country

我是一个完整的网络开发菜鸟,我在以下代码中分配myCountry变量时遇到了麻烦:

 <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>

我想将data.address.country的值赋给myCountry并在函数外使用它,但值始终保持&#34; &#34;

如果我使用以下代码,jsonpCallback函数会显示国家/地区(但我希望能够在html中修改它的位置):

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

            }

谢谢

1 个答案:

答案 0 :(得分:0)

正如@Sirko所提到的,问题是你实际上没有调用Wipmania api,你试图将回调作为QueryString参数使用,只需将请求放在<script>代码。

以下是您可能想要做的事情。

首先,您要更改回调函数的标签,因为它将在请求检索到任何数据后执行:

<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>

接下来你要做的是实际调用api,也许是使用Javascript本身的XMLHttpRequest

// 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();

希望它有所帮助,对于Javascript的更多基础知识,我推荐一些在线速成课程,或许Codecademy是一个很好的起点。

干杯