javascript - 货币兑换脚本不起作用

Question

出于某种原因，我无法获得 JSON 的值，任何人都可以帮助我吗？

function forex() {
    var to = document.getElementById("to").value;
    alert(to);
    var from = document.getElementById("from").value;
    alert(from);
    var amount = document.getElementById("amount").value;
    alert(amount);
    $.getJSON("http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&q=" + amount, function (response) {
        alert(response);
    });

    }

Answer 1

演示

由于Same Origin Policy，您无法通过 ajax 访问 rate-exchange.appspot.com 上的资源，因为您的 Javascript 在不同的域上执行。

在您的情况下，此特定站点支持JSONP，因此您可以使用 jQuery 的 JSONP 实现来绕过同源策略。JSONP 通过将目标 URL 作为<script>标记并使用不受同源策略约束的回调来工作。

如果该$.getJSON()方法在 URL 中找到参数，例如callback=?.

例子：

function forex() {
    var to = document.getElementById("to").value;
    var from = document.getElementById("from").value;
    var amount = document.getElementById("amount").value;

    $.getJSON("http://rate-exchange.appspot.com/currency?&callback=?", { from : from, to : to, q : amount }, function (response) {
        alert(response.v);
    });
}

我还将您的手动 URL 变量更改为首选对象，因为 jQuery 将处理 URL 编码。

Answer 2

而不是下面的代码：

$.getJSON("http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&q=" + amount, function (response) {
   alert(response);
});

使用以下代码：

$.ajax({
  url: "http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&q=" + amount,
  dataType: 'jsonp',
  success: function(response) {
        alert(response.v);
  }
});