[解決済み] API Forismatic JSON: ランダム引用マシン
2022-03-03 09:15:36
質問
現在、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を使用しています。(私の専門用語ですみません)
このサイトで実行するとうまくいくのですが、on: https://codepen.io/gilioo/pen/JKpjgr 引用符が生成されません。
よろしくお願いします。
解決方法は?
codepen.ioにhttpsでアクセスされていますが、forismatic APIはhttpでしか提供されていませんので、CORS(Cross-Origin Resource Sharing)の問題だと思われます。 次のようにしてみてください。 http://codepen.io をクリックし、動作するかどうかを確認します。私自身、https経由でAPIを使用しようとすると、同じ問題に遭遇したことがあります。
関連
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み] 正しいJSONコンテンツタイプは何ですか?
-
[解決済み] JSONでコメントを使用することはできますか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] cURLでJSONデータをPOSTするにはどうすればよいですか?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] JavaScriptでランダムな文字列/文字を生成する
-
[解決済み] JavaScriptで特定の範囲のランダムな整数を生成する?
-
[解決済み] JavaScriptで2つの数値の間の乱数を生成する
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み】中央値の計算 - javascript