API forismatic JSON: Máy trích dẫn ngẫu nhiên

Question

Tôi hiện đang xây dựng một cỗ máy báo giá sử dụng API forismatic và hoàn toàn bị bóp nghẹt. Chương trình của tôi đã hoạt động tốt cho đến khi tôi quyết định xem lại công việc của mình trong tương lai. Dưới đây là mã của tôi:

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>

Tôi đang làm gì sai? Tôi đã tạo một biến để giữ url của tôi, tạo ra một hàm nhận dữ liệu và sử dụng getJSON để sử dụng chức năng của tôi. (Xin lỗi thuật ngữ của tôi)

Nó hoạt động khi tôi chạy trên trang web này, nhưng trên: https://codepen.io/gilioo/pen/JKpjgr nó không tạo báo giá.

Mọi trợ giúp đều được đánh giá cao.

Answer 1

Tôi tin rằng đó là vấn đề chia sẻ tài nguyên gốc (CORS), bạn đang truy cập codepen.io qua https nhưng API forismatic chỉ được cung cấp qua http afaik. Bạn có thể thử http://codepen.io và xem nó có hoạt động hay không. Tôi đã tự mình gặp phải vấn đề tương tự khi cố sử dụng API qua https.