2017-06-15 66 views
1

我想從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> 
+0

我認爲它因爲跨域錯誤的? – AdhershMNair

+0

你應該閱讀你的json對象的引用,然後在你的div上添加引用來檢查這個[tutorial](https://www.w3schools.com/js/js_json_objects.asp)閱讀json對象,再加上確保你[允許](https://stackoverflow.com/questions/6871021/how-to-enable-cross-domain-request-on-the-server)跨域ajax調用 – Munzer

+0

https://j11y.io/javascript/cross -domain-請求與 - jQuery的/ – Freak

回答

1

請嘗試此工作對於我沒有跨域錯誤。我已將其更改爲函數並使用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>

0

嘗試使用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/