jQuery getJSONメソッドでJSONを取得する

APIからJSONを使用してランダムな引用符を生成しようとしています。ボタンをクリックすると、「メッセージはここに行きます」の代わりにjsonが入力されます。しかし、私は立ち往生しています。コードは以下の通りですし、プロジェクトのリンク：jQuery getJSONメソッドでJSONを取得する

https://codepen.io/monsieurshiva/pen/awBbEE

<html> 
<head> 

    <script> 
    $(document).ready(function() { 

    $("#getMessage").on("click", function(){ 

     $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) { 
    $(".message").html(JSON.stringify(json)); 
}); 

    }); 

    }); 
</script> 
</head> 
<body> 
     <div class = "col-xs-12 well message"> 
     The message will go here 
    </div> 
     <button id = "getMessage" class = "btn btn-primary"> 
     Get Message 
     </button> 
</body> 
</html>

出典

2017-06-15 KopMaverick

私はそのためのクロスドメインエラーと思いますか？ – AdhershMNair

jsonオブジェクトの見積もりを読んでから、その見積もりをdivに追加すると、jsonオブジェクトを読むときにこの[チュートリアル]（https://www.w3schools.com/js/js_json_objects.asp）をチェックし、 allow]（https://stackoverflow.com/questions/6871021/how-to-enable-cross-domain-request-on-the-server）クロスドメインajaxコール – Munzer

https://j11y.io/javascript/cross -domain-requests-with-jquery / – Freak

ドメイン間エラーのない私にはこれを試してください。私はそれを関数に変更し、データを取るためにajaxを使用します。また、安全でないスクリプトエラーを回避するには、https api URLを使用してください。

<html> 
 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script> 
 
     $(document).ready(function() { 
 
    
 
    
 
    
 
    $(function() { 
 
     $('#getMessage').on('click', function(){ 
 
     load(); 
 
     }); 
 
    }); 
 
        
 
        var linkUrl = "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en"; 
 
        var load = function() { 
 
          $.ajax(
 
          { 
 
            dataType : "jsonp", 
 
            jsonp : "jsonp", 
 
            url : linkUrl, 
 
            success : function(response){ 
 
              $(".message").html(response.quoteText); 
 
            } 
 
          }); 
 
        }; 
 
    
 
     }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
      <div class = "col-xs-12 well message"> 
 
      The message will go here 
 
     </div> 
 
      <button id = "getMessage" class = "btn btn-primary"> 
 
      Get Message 
 
      </button> 
 
    </body> 
 
    </html>

出典

2017-06-15 13:57:57 AdhershMNair

JSONP使用してみてください - 例

$(document).ready(function(){ 
    $.ajax({ 
     url: 'http://openexchangerates.org/latest.json', 
     dataType: 'jsonp', 
     success: function(json) { 
      // Rates are in `json.rates` 
      // Base currency (USD) is `json.base` 
      // UNIX Timestamp when rates were collected is in `json.timestamp`   

      rates = json.rates; 
      base = json.base; 
      console.log(rates); 
     } 
    }); 
});

ORこの

<script> 
(function() { 
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
    $.getJSON(flickerAPI, { 
    tags: "mount rainier", 
    tagmode: "any", 
    format: "json" 
    }) 
    .done(function(data) { 
     $.each(data.items, function(i, item) { 
     $("<img>").attr("src", item.media.m).appendTo("#images"); 
     if (i === 3) { 
      return false; 
     } 
     }); 
    }); 
})(); 
</script>

参考：http://api.jquery.com/jquery.getjson/

を

出典

2017-06-15 13:34:42 Freak

jQuery getJSONメソッドでJSONを取得する

答えて

関連する問題