在HTML中使用星座API对象

时间:2016-05-06 21:22:37

标签: html json oop api-design

我正致力于创建一个使用星座运算API自行生成星座的网站。我使用的API创建了一个带有四个元素的JSON对象:sunsign,meta,horoscope和date。我想要使​​用的只是星座本身:因为api结果的url已经包含了日期和符号,并且不需要元素,所以没有必要使它变得更复杂。

API来自此网站: http://theastrologer-api.herokuapp.com/api/horoscope/taurus/today

我遇到的问题是参考物体的星座。我无法判断我是否格式化输出不正确,因此网页无法显示,或者引用本身是否存在缺陷。如果有人能帮助我搞清楚并纠正它,我将不胜感激。

这是我目前的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Daily Horoscope</title>
    <link rel="Stylesheet" media="all" href="styles.css" />
    <link rel="shortcut icon" type="icon/x-icon" href="icon.jpg" />
</head>

<body>
    <img class = "banner" src="horoscopebanner.jpg" />
    <h2>What's your day going to be? Find out now!</h2>
    <h4>If this is your first visit, scroll on down to your horoscope. Select your sign at from the bottom radial buttons, 
so when you join us next time, your horoscope will be at the top of the list!</h4>
<div class = "horoscopes" id="aries">
    <img class="signs" src="aries.jpg" alt="Aries Sign" align="left" />
</div>
<div class = "horoscopes" id="taurus" >
    <img class="signs" src ="taurus.jpg" alt="Taurus Sign" align="left" />
</div>
/* Rest of the signs and their horoscopes here */

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://theastrologer-api.herokuapp.com/api/horoscope/taurus/today";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
    var object = JSON.parse(response);
    var out = "<p>";
    out += object.horoscope + "</p>";
    document.getElementById("taurus").innerHTML = out;
}
</script>

</body>
</html>

提前感谢您提供任何帮助。

0 个答案:

没有答案