仅使用 js 在 HTML 页面中显示 API 请求结果答案

【问题标题】：Display API request results in HTML page using only js仅使用 js 在 HTML 页面中显示 API 请求结果
【发布时间】：2017-10-16 12:55:55
【问题描述】：

我对 js 和 API 有点陌生，

我写了一个小代码，假设去向 2 个网站询问一些数据，然后我只取一部分结果并将其添加到我的 html 页面中。

我正在尝试让它与第一个网站一起工作，因为当我拥有第一个网站时，它很容易在第二个网站上工作。

我只想使用 js 而不是 php 或其他语言。

暂时不行……

这是我的 js

好的，如果你现在才来这里，

我的代码已使用 Justin 和 Aashah 下面的 2 个答案进行了更新，现在的问题是浏览器说为了使用 cors 获取，我需要 http 或 https，并说 [ object%20Object]，所以仍然没有数据显示，如果有人有解决方案，请帮助我们:)

var urlbitfinex = "https://api.bitfinex.com/v1";
var urlkraken = "https://api.kraken.com/0/public/Ticker?pair=";
var resultBitfinex;

//request bitfinex price
request.get(urlbitfinex + "/pubticker/btcusd",
  resultBitfinex = function(error, response, body) {
    console.log(body)
    return body;
  });

//request kraken price
request.get(urlkraken + "xbteur",
  function(error, response, body) {
    console.log(body);
  });

//Pushing the result to the html
var price_USD = document.getElementById('price-usd');
var USDPrice = '<p>USDEUR Price:' + resultBitfinex.ask '</p>';
price_USD.innerHTML += USDPrice;

还有我的html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="price-usd">
  </div>
  <script src="getPrices.js"></script>
</body>
</html>

【问题讨论】：

嗯，似乎 vars 没有像“entry”一样声明，并且请求它没有被使用
你说的“并且要求不被无用”是什么意思？
是的，它不清晰，你用来要求什么，没有任何东西。
很抱歉，请求中有数据api.bitfinex.com/v1/pubticker/btcusd
'Access-Control-Allow-Origin' 是您无法在客户端修复的问题。服务器的所有者需要将其添加到其应用程序的服务器端。第一个请求不起作用，因为服务器的所有者需要服务器允许每个人访问它。我试图提出第二个请求，并且那个确实有效。请参阅plnkr.co/edit/BEdYpVhJGCXyTPnAP482?p=preview 并更改网址

标签： javascript html api request

【解决方案1】：

您实际上并没有对响应做任何事情。

如果你不需要支持 IE，你可以使用fetch。下面是一个例子： How to get the response of XMLHttpRequest?

var url = "https://stackoverflow.com"; // Change this to your URL
fetch(url)
    .then(function(response) {
          if(response.ok) { // Check if response went through
              response.json().then(function(data) { 
                  var price_USD = document.getElementById('price-usd');
                  var USDPrice = '<p>USDEUR Price:' + data.something + '</p>';
                  price_USD.innerHTML += USDPrice;
              });
          } else { // Response wasn't ok. Check dev tools
              console.log("response failed?");
          }
    });

更多关于Fetchhere。

【讨论】：

谢谢你，我试过你的答案，但它没有显示数据，我错过了什么吗？
您是否更改了data.something 和url 以满足您的需求？
是的，我写了我的 url 和 response.ask
观察data中的数据结构。意思是做一个console.log(data); 并查看开发工具中的结果。我不完全确定数据的结构会是什么样子。您必须将data.something 更改为data.[your requested data]
谢谢它似乎有效，但它说在 var USDPrice = '
USDEUR Price:' + data.something'
';

【解决方案2】：

您必须在回调中处理 UI 更改：

fetch({ url: urlkraken + "/pubticker/btcusd", cors: true })
.then(res => res.json())
.then(res => {
  const price_USD = document.querySelector('#price-usd');
  const USDPrice = '<p>USDEUR Price:' + res.ask + '</p>';
  price_USD.innerHTML += USDPrice;
})
.catch(err => console.log(err));

【讨论】：

谢谢，是不是在你的浏览器中显示了一些东西，因为它在我的浏览器中是空白的
request 变量从何而来？它似乎没有在提供的代码中定义。谢谢。
:p 还没有真正定义它，我认为这是我需要用于这种事情的语法
好的，所以我更新了我的答案以使用 fetch，它本机内置于较新版本的 Javascript 中。
哦，我知道错误来自哪里，我收到此错误：无法加载api.bitfinex.com/v1/pubticker/btcusd：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。