एपीआई Forismatic JSON: रैंडम उद्धरण मशीन

Question

मैं वर्तमान में forismatic एपीआई का उपयोग कर एक उद्धरण मशीन का निर्माण कर रहा हूँ और पूरी तरह से स्टंप्डया हूँ। मेरा कार्यक्रम ठीक काम कर रहा था जब तक कि मैंने भविष्य में अपने काम की समीक्षा करने का फैसला नहीं किया।

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>

क्या मैं गलत कर रहा हूँ: यहाँ मेरी कोड है? मैंने अपना यूआरएल पकड़ने के लिए एक चर बनाया है, एक फ़ंक्शन बनाया है जो डेटा प्राप्त करता है, और मेरे फ़ंक्शन का उपयोग करने के लिए getJSON का उपयोग करता है। (क्षमा करें मेरी शब्दावली)

यह काम करता है जब मैं इसे इस वेबसाइट पर चलाता हूं, लेकिन: https://codepen.io/gilioo/pen/JKpjgr यह उद्धरण उत्पन्न नहीं करता है।

किसी भी मदद की सराहना की जाती है।

Answer 1

मेरा मानना ​​है कि यह एक अंतर-उत्पत्ति रिसोर्स शेयरिंग (CORS) मुद्दा है, अगर आप https के माध्यम से codepen.io पहुँच बना रहे हैं लेकिन forismatic केवल API afaik http के माध्यम से की पेशकश की है। आप http://codepen.io कोशिश करें और देखें कि यह काम करता है हो सकता है। Https के माध्यम से एपीआई का उपयोग करने की कोशिश करते समय मैंने खुद को एक ही समस्या में चलाया है।