仅使用js在HTML页面中显示API请求结果 [英] Display API request results in HTML page using only js
问题描述
我对 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;//请求bitfinex价格request.get(urlbitfinex + "/pubticker/btcusd",resultBitfinex = 函数(错误，响应，正文){控制台日志(正文)返回身体；});//请求海妖价格request.get(urlkraken + "xbteur",功能(错误，响应，正文){控制台日志(正文)；});//将结果推送到htmlvar price_USD = document.getElementById('price-usd');var USDPrice = '<p>USDEUR 价格:' + resultBitfinex.ask '</p>';price_USD.innerHTML += USDPrice;还有我的 html
<头><meta charset="utf-8"><title>测试</title><link rel="stylesheet" type="text/css" href="style.css"><身体><div id="价格-美元"><script src="getPrices.js"></script></html>
您实际上并没有对响应做任何事情.
如果您不必支持 IE，则可以使用 fetch.下面是一个取自的例子:如何获取 XMLHttpRequest 的响应?
var url = "https://stackoverflow.com";//将其更改为您的 URL获取(网址).then(功能(响应){if(response.ok) {//检查响应是否通过response.json().then(function(data) {var price_USD = document.getElementById('price-usd');var USDPrice = '<p>USDEUR 价格:' + data.something + '</p>';price_USD.innerHTML += USDPrice;});} else {//响应不正常.检查开发工具console.log("响应失败?");}});更多关于Fetch这里.
I'm kinda new to js and API,
I have written a little code that is suppose to go ask 2 websites some data, then I only take a part of the result and add it to my html page.
I'm trying to get it work with the first website as it will be easy to make it work on the second one when I'll have the first.
I want to use only js and not php or other languages.
It is not working for the moment...
So here is my js
Ok if you come here only now,
My code has been updated using the 2 answers below of Justin and Aashah, the issue now is that the browser says that in order to fetch with cors, I need a http or https, and says that there is an issue with [object%20Object], so still no data showing up, if someone has a solution, please help us :)
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;
And my 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>
You aren't really doing anything with the response.
If you don't have to support IE you can use fetch. Here's an example taken from:
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?");
}
});
More about Fetch here.
这篇关于仅使用js在HTML页面中显示API请求结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
