使用 jQuery getJSON 方法获取 JSON

Question

我正在尝试使用 api 中的 JSON 生成随机引号。单击按钮时，json 应该会代替 "The message will go here"。但我发现卡住了。代码如下，项目 link：

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>

Answer 1

尝试使用 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);
        }
    });
});

或者这个

<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/

Answer 2

请在没有跨域错误的情况下试试这个对我有用。我已将其更改为函数并使用 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>

使用 jQuery getJSON 方法获取 JSON

Getting JSON with the jQuery getJSON Method

jquery

json

json-api