使用 Javascript 从 .xml 网站中获取数字

Question

我正在尝试从this website 获取某些货币的汇率并将这些数字用于我的货币转换器，因为它们每天都会更新。 这是计算器 jsfiddle net/ems3bh7t/。

我在选择器选项中有货币，它们的值是“欧元、美元等”，就像它们在上面的汇率网站linked 中一样。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name=currencyOutput id=currencyOutput>
	<option id=currency1 label="EUR (Euro)" value="EUR">EUR</option>
	<option id=currency2 label="USD (US-Dollar)" value="USD">USD</option>
	<option id=currency3 label="GBP (British Pound)" value="GBP">GBP</option>
	<option id=currency4 label="YEN (Japanischer Yen)" value="YEN">YEN</option>
</select>

我认为最好的方法是通过某种方式在网站中查找所选选项的值，然后将之后出现的数字放入可用于计算的变量中。

<Cube currency="USD" rate="1.0927"/>"
<Cube currency="JPY" rate="114.39"/>
<Cube currency="BGN" rate="1.9558"/>
<Cube currency="CZK" rate="27.022"/>
<Cube currency="DKK" rate="7.4376"/>

如果有任何帮助或教程链接，我将不胜感激。我已经完成了大约 30 分钟的激烈 google 和堆栈搜索，但没有找到任何解释或什至与我的主题相同的内容。

感谢阅读，如果您需要更多信息或完整的 html/js 程序，我可以立即添加。

Answer 1

使用 AJAX 或服务器获取数据，然后简单地将其视为文档标记：

//Same origin problem
$.ajax({
  url: 'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
  complete: function(res) {
    console.log("Response from AJAX attempt:", res.statusText);
  },
  dataType: 'text'
});

//Fiction response
var res = "<gesmes:Envelope xmlns:gesmes=\"http://www.gesmes.org/xml/2002-08-01\" xmlns=\"http://www.ecb.int/vocabulary/2002-08-01/eurofxref\">\n<gesmes:subject>Reference rates</gesmes:subject>\n<gesmes:Sender>\n<gesmes:name>European Central Bank</gesmes:name>\n</gesmes:Sender>\n<Cube>\n<Cube time='2016-10-27'>\n<Cube currency='USD' rate='1.0927'/>\n<Cube currency='JPY' rate='114.39'/>\n<Cube currency='BGN' rate='1.9558'/>\n<Cube currency='CZK' rate='27.022'/>\n<Cube currency='DKK' rate='7.4376'/>\n<Cube currency='GBP' rate='0.89158'/>\n<Cube currency='HUF' rate='309.23'/>\n<Cube currency='PLN' rate='4.3292'/>\n<Cube currency='RON' rate='4.5038'/>\n<Cube currency='SEK' rate='9.8150'/>\n<Cube currency='CHF' rate='1.0838'/>\n<Cube currency='NOK' rate='8.9858'/>\n<Cube currency='HRK' rate='7.5010'/>\n<Cube currency='RUB' rate='68.6064'/>\n<Cube currency='TRY' rate='3.3845'/>\n<Cube currency='AUD' rate='1.4339'/>\n<Cube currency='BRL' rate='3.4261'/>\n<Cube currency='CAD' rate='1.4605'/>\n<Cube currency='CNY' rate='7.4082'/>\n<Cube currency='HKD' rate='8.4741'/>\n<Cube currency='IDR' rate='14240.57'/>\n<Cube currency='ILS' rate='4.1989'/>\n<Cube currency='INR' rate='73.0135'/>\n<Cube currency='KRW' rate='1249.16'/>\n<Cube currency='MXN' rate='20.4611'/>\n<Cube currency='MYR' rate='4.5846'/>\n<Cube currency='NZD' rate='1.5296'/>\n<Cube currency='PHP' rate='52.985'/>\n<Cube currency='SGD' rate='1.5211'/>\n<Cube currency='THB' rate='38.343'/>\n<Cube currency='ZAR' rate='15.1421'/>\n</Cube>\n</Cube>\n</gesmes:Envelope>";
//Fiction response

var returnString = '<select name="currencyOutput" id="currencyOutput">' + "\n";

jQuery(res).find("Cube").each(function(i, el) {
  var curr = jQuery(el).attr("currency");

  if (curr != void 0) {
    returnString += '<option id="currency' + i + '" value="' + curr + '">' + curr + '</option>' + "\n";
  }

})

returnString += '</select>';
jQuery("#output").html(returnString);
console.log(returnString)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>