API Forismatic JSON：ランダム見積もり機

Question

私は現在、forismatic APIを使用して見積もり機を構築しており、まったく困惑しています。私のプログラムは、将来私の仕事を再訪することになるまでうまくいっていました。ここに私のコードは次のとおりです。

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

 
var getQuote=function(data){ 
 
    if(data.quoteAuthor === "") { 
 
    data.quoteAuthor = "Unknown"; 
 
    }  
 
    $('#author').text(data.quoteAuthor); 
 
    $('#text').text(data.quoteText); 
 
    
 
    var quote = 'https://twitter.com/intent/tweet?text=' + "\"" + data.quoteText + "\"" + ' Author: ' + data.quoteAuthor +' @Gil_Skates'; 
 

 
    $('#tweet').attr("href", quote); 
 
}; 
 

 
$(document).ready(function() { 
 
    $.getJSON(html, getQuote, 'jsonp'); 
 
}); 
 
    
 
// On button click 
 
$('#new-quote').on("click", function(){ 
 
    // Deletes text and creates spinner 
 
    $('#text').text(""); 
 
    $('#author').text(""); 
 
    $('<span style = "margin-left:200px" class="fa-li fa fa-spinner fa-spin"/>').appendTo('#text'); 
 
    
 
    // Calls our random quote 
 
    $.getJSON(html, getQuote, 'jsonp'); 
 
}); 
 

 
// Tweet popup 
 
window.twttr = (function(d, s, id) { 
 
    var js, fjs = d.getElementsByTagName(s)[0], 
 
    t = window.twttr || {}; 
 
    if (d.getElementById(id)) return t; 
 
    js = d.createElement(s); 
 
    js.id = id; 
 
    js.src = "https://platform.twitter.com/widgets.js"; 
 
    fjs.parentNode.insertBefore(js, fjs); 
 
    
 
    t._e = []; 
 
    t.ready = function(f) { 
 
    t._e.push(f); 
 
    }; 
 
    
 
    return t; 
 
}(document, "script", "twitter-wjs"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class = "quote-box centered"> 
 
    <div class = "quote-text"> 
 
     <i class="fa fa-quote-left"></i><span id = "text" >Quotes inspire<span> 
 
    </div> 
 
    <div class = "quote-author"> 
 
    <span id = "author">Programmer</span> 
 
    </div> 
 
    
 
    <div class = "buttons"> 
 
    <a class="button" href="https://twitter.com/intent/tweet" data-size="large" id="tweet" title="Tweet this now!" target="_blank"> 
 
     <i class = "fa fa-twitter"></i> 
 
    </a> 
 
    
 
    <!--<a class="button" id="tumblr" title="Share on Tumblr!" target="_blank"> 
 
     <i class = "fa fa-tumblr"></i> 
 
    </a>--> 
 
    
 
    <button class = "button" id ="new-quote">New Quote</button> 
 
    </div> 
 
</div>

私が間違って何をしているのですか？ URLを保持する変数を作成し、データを取得する関数を作成し、getJSONを使用して関数を利用しました。

これは私がこのウェブサイトで実行したときに動作しますが、https://codepen.io/gilioo/pen/JKpjgr は引用符を生成しません。

何か助けていただければ幸いです。

Answer 1

私はクロスソースリソース共有（CORS）の問題だと思っています。あなたはhttps経由でcodepen.ioにアクセスしていますが、forismatic APIはhttp afaikでのみ提供されています。 http://codepen.ioを試して、効果があるかどうかを確認できます。 https経由でAPIを使用しようとしているときに、同じ問題が発生しました。