Получение JSON с помощью метода jQuery getJSON

Я пытаюсь использовать JSON из API для генерации случайных кавычек. При нажатии кнопки 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>

json jquery json-api
person KopMaverick    schedule 15.06.2017    source источник
comment
Я думаю, это из-за междоменной ошибки?   -  person AdhershMNair    schedule 15.06.2017
comment
вы должны прочитать цитату из вашего объекта json, а затем добавить эту цитату в свой div, проверьте этот учебник при чтении объекта json, а также убедитесь, что вы разрешите междоменные вызовы ajax   -  person Munzer    schedule 15.06.2017
comment
j11y.io/javascript/кросс-доменные-запросы-с-jquery   -  person Freak    schedule 15.06.2017

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, попробуйте это, это работает для меня без междоменной ошибки. Я изменил его на функцию и использую ajax для получения данных. Также используйте URL-адрес API https, чтобы избежать ошибки небезопасного скрипта.

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

person AdhershMNair    schedule 15.06.2017

arrow_upward
0
arrow_downward

Попробуйте использовать 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/

person Freak    schedule 15.06.2017