在Wordpress中显示cryptocompare API数据

时间:2018-07-27 21:05:15

标签: wordpress api display

我需要在WordPress网站前端的按钮单击上显示硬币价格(来自cryptocompare API)。我的编码技能有限,所以如果您可以直接向我解释如何做,那就太好了!

这就是我所拥有的; HTML

<button id="api-button">Show Data</button>
<div id="api-display-container"></div>

main.js

    var apiButton = document.getElementById("api-button");
var apiDisplayContainer = document.getElementById("api-display-container");

if (apiButton) {
    apiButton.addEventListener("click", function() {
        var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=BTC,USD,RUB');
ourRequest.onload = function() {
  if (ourRequest.status >= 200 && ourRequest.status < 400) {
    var data = JSON.parse(ourRequest.responseText);
      createHTML(data);
  } else {
    console.log("We connected to the server, but it returned an error.");
  }
};

ourRequest.onerror = function() {
  console.log("Connection error");
};

ourRequest.send();
    });
}

functions.php

function cryptocompareAPI(){

    wp_enqueue_script('main.js', get_template_directory_uri() . '/assets/js/main.js', NULL, 1.0, true);
}
add_action('wp_enqueue_scripts', 'cryptocompareAPI');

当我替换createHTML(data)时;使用console.log(data),正确的数据将显示在控制台中。

如何在前端显示它?请解释或提供示例。谢谢!

0 个答案:

没有答案