JS没有从Forismatic API中提取数据

时间:2016-10-19 19:18:47

标签: javascript jquery html

编辑:我自己想出了解决方案,但我想回答一下为何这样做。我从网址中删除了https://并解决了问题。不知道为什么这会成为一个问题。也许https更安全?

以下是我在codepen上编写的一些相关的HTML和Js代码,因此头文件和库不直接在代码中。以下是codepen页面的链接:https://codepen.io/slicknick/pen/vXVYpg

这是一个使用Forismatic API创建随机报价生成器的项目。我是API和Js的新手。我似乎无法在我的页面上显示引号,并希望得到一些反馈,说明为什么会发生这种情况。

HTML

<div class="container-fluid">
<div class="row">
    <div class="col-xs-6 col-centered">
        <blockquote>
            <p id="quote-text"></p>
            <footer>
                <a id="author" target="_blank"></a>
            </footer>
        </blockqoute>
        <button type="button" id="getQuote" class="btn btn-secondary">New quote</button>
        <a href="http://twitter.com/home?status=%23Quote" target="_blank"><i class="fa fa-twitter-square fa-3x" id="twitter-share" aria-hidden="true"></i></a>
    </div>
</div>

$(function() {
var author = $('#author');
var text = $('#quote-text');
getQuote(author, text);

$('#getQuote').click(function(event) {
    event.preventDefault();
    getQuote(author, text);
    $('#twitter-share').removeClass("disabled");
    $('#twitter-share').html("Share with Twitter!");
})
});

var tweetText = "";
$('#twitter-share').click(function() {
if (tweetText.length > 140) {
    tweetText = "";
    $(this).addClass("disabled");
    $(this).html("140 chars exceeded!");
} else {
    $(this).attr("href", "https://twitter.com/intent/tweet?text=" +        tweetText);
}

})

function getQuote(author, text) {

var forismaticURL = "http://api.forismatic.com/api/1.0/? method=getQuote&lang=en&format=jsonp&jsonp=?"

$.getJSON(forismaticURL, function(data) {

    text.html(data.quoteText);
    if (data.quoteAuthor) {
        author.html(data.quoteAuthor);
        author.attr("href", data.quoteLink);
    } else {
        author.removeAttr("href");
        author.html("<strong>Anonymous</strong>");
    }
    tweetText = data.quoteText + "By -" + data.quoteAuthor;
});
}

1 个答案:

答案 0 :(得分:0)

从Forismatic API文档引用

  

API方法调用以对URL http://api.forismatic.com/api/1.0/的HTTP请求的形式实现。

这就是你在HTTPS上获得错误404的原因。

希望它有所帮助。