Fatal编程技术网
  • javascript/
  • Javascript 仅使用js在HTML页面中显示API请求结果

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

javascript html api

Javascript 仅使用js在HTML页面中显示API请求结果,javascript,html,api,request,Javascript,Html,Api,Request,我对js和API有点陌生 我已经写了一个小代码，假设去问两个网站一些数据，然后我只采取了结果的一部分，并将其添加到我的html页面 我正试图让它与第一个网站的工作，因为它将很容易使它在第二个工作时，我将有第一个 我只想使用js，不想使用php或其他语言 它暂时不起作用 这是我的js 好吧，如果你现在才来 我的代码已使用下面Justin和Aashah的两个答案进行了更新，现在的问题是浏览器说为了使用cors获取，我需要http或https，并且说[object%20Object]存在问题，因此仍然

我对js和API有点陌生

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

我正试图让它与第一个网站的工作，因为它将很容易使它在第二个工作时，我将有第一个

我只想使用js，不想使用php或其他语言

它暂时不起作用

这是我的js

好吧，如果你现在才来

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

var urlbitfinex=”https://api.bitfinex.com/v1";
var urlkraken=”https://api.kraken.com/0/public/Ticker?pair=";
var resultBitfinex；
//请求bitfinex价格
request.get（urlbitfinex+“/pubticker/btcusd”，
resultBitfinex=函数（错误、响应、正文）{
控制台日志（正文）
返回体；
});
//请求海怪价格
请求。获取（urlkraken+“xbteur”，
功能（错误、响应、正文）{
控制台日志（主体）；
});
//将结果推送到html
var price_USD=document.getElementById（'price-USD'）；
var USDPrice='USDEUR价格：'+resultBitfinex.ask'
'；
价格_USD.innerHTML+=USD价格；
还有我的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>


试验
您必须处理回调中的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));

fetch（{url:urlkraken+“/pubticker/btcusd”，cors:true}）
.then（res=>res.json（））
。然后（res=>{
const price_USD=document.querySelector（“#price USD”）；
常量USDPrice='USDEUR价格：'+res.ask+'
'；
价格_USD.innerHTML+=USD价格；
})
.catch（err=>console.log（err））；
您并没有对响应进行任何处理

如果您不必支持IE，您可以使用
获取
。以下是一个例子： 

var url=”https://stackoverflow.com"; // 将此更改为您的URL
获取（url）
.然后（功能（响应）{
if（response.ok）{//检查响应是否通过
response.json（）.then（函数（数据）{
var price_USD=document.getElementById（'price-USD'）；
var USDPrice='USDEUR价格：'+data.something+'
'；
价格_USD.innerHTML+=USD价格；
});
}否则{//响应不正常。请检查开发工具
日志（“响应失败？”）；
}
});
关于
Fetch

mmm的更多信息，似乎vars没有像“entry”那样声明，请求不用于任何目的，您所说的“和请求不用于任何目的”是什么意思？是的，这不清楚，您用于请求不用于任何目的，没有用于任何用途。很抱歉，请求中有数据
'Access-Control-Allow-Origin'
无法在客户端修复。服务器的所有者需要将其添加到应用程序的服务器端。第一个请求不起作用，因为服务器的所有者需要服务器允许所有人访问它。我试着提出第二个请求，但这个请求确实有效。查看并更改URLST谢谢，它是否在浏览器中显示了某些内容，因为它在我的浏览器中保持空白，
request
变量来自何处？它似乎没有在提供的代码中定义。谢谢。：p实际上还没有定义它，我认为这是我需要用于这种东西的语法，所以我更新了我的答案，使用
fetch
，这是新版本Javascript中固有的。哦，我知道错误来自何处了，我收到以下错误：加载失败：请求的资源上不存在“Access Control Allow Origin”头。因此，不允许访问源“null”。如果不透明的响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源。谢谢，我尝试了您的答案，但它没有显示数据，我是否遗漏了什么？您是否更改了
数据。
和
url
以满足您的需要？是的，我写了我的url和回复。ask在
data
中观察数据结构。意思是做一个
console.log（数据）并查看开发工具中的结果。我不完全确定数据的结构会是什么样子。您必须将
数据。something
更改为
数据。[您请求的数据]
谢谢它似乎有效，但它说在var USDPrice='USDEUR Price:'+data.something'
'行中有一个意外字符串；

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



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?");
          }
    });