2015-04-28 96 views
0

這是我的第一篇文章,所以請溫柔! :-)使用getexchangerates.com API以不同貨幣顯示價格表

我有一個網頁價格以GB爲單位的表格,我想在幾種主要貨幣(例如美元,歐元等)上再添加幾列價格

我找到了http://www.getexchangerates.com/api/,可以調用API,但似乎無法讓它在網頁上工作。我知道這是爲了防止跨站點問題。請問有沒有辦法做到這一點?

如果我可以讓API調用工作,我應該能夠得到計算和表排序。

我正在嘗試的代碼如下 - 它返回一個空白頁面欄貨幣標題。

<body> 
<h1>Currencies</h1> 
<div id="id01"></div> 
<script> 
var xmlhttp = new XMLHttpRequest(); 
var url = "http://www.getexchangerates.com/api/latest.json?currencies=EUR,GBP"; 
xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    myFunction(xmlhttp.responseText); 
    } 
} 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function myFunction(response) { 
    var arr = JSON.parse(response); 
    var i; 
var out = "<table>"; 

for(i = 0; i < arr.length; i++) { 
    out += "<tr><td>" + 
    arr[i].USD + 
    "</td><td>" + 
    arr[i].EUR + 
    "</td><td>" + 
    arr[i].GBP + 
    "</td></tr>"; 
} 
out += "</table>" 
document.getElementById("id01").innerHTML = out; 
} 
</script> 

</body> 
</html> 

謝謝。

理查德

回答

0

嘗試:

</html> 
<head> 
</head> 
<body> 
<h1>Currencies</h1> 
<div id="id01"></div> 
<script> 

(function() { 
    var xmlhttp = new XMLHttpRequest(); 
    var url = "http://www.getexchangerates.com/api/latest.json?currencies=EUR,GBP"; 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     myFunction(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 

    function myFunction(response) { 
     var arr = JSON.parse(response); 
     var out = "<table border='1'><tr><td>USD</td><td>EUR</td><td>GBP</td></tr><tr><td>" + arr.USD + "</td><td>" + arr.EUR +"</td><td>" + arr.GBP + "</td></tr>" + "</table>"; 
     document.getElementById("id01").innerHTML = out; 
    } 
})(); 

</script> 

</body> 
</html> 

返回的數據是一個對象,而不是陣列。因此你不能迭代傳回的數據。

+0

太棒了!普拉瓦,非常感謝你! – Richard