jQueryを使用したWebサービスの使用

Question

以下のコードを実行しようとしていますが、何も起こりません。

開発者向けオプションでFirefox/Chromeにエラーメッセージは表示されません。

私が間違っていることは何ですか？

$(document).ready(function() { 

    jQuery.support.cors = true; 

    var AltCoin = "ripple"; 
    //var api_url = "https://api.coinmarketcap.com/v1/ticker/" + AltCoin; 
    var api_url = "https://api.coinmarketcap.com/v1/ticker/"; 

    $.ajax({ 
     method: "GET", 
     dataType: "jsonp", 
     url: api_url, 
     data: AltCoin, 
     success: function(data) { 
      try {         
       $('#coin_value').html(data); 
      } 
      catch (error) { 
       alert('error found');         
      } 
     } 
    }); 
}); 

<article class="article"> 
    <h1>Ripple</h1> 
    <p id="coin_value">test</p> 
    <p></p> 
    <p><strong></strong></p> 
</article> 

スクリプトは非常に基本的です。

Answer 1

問題は、呼び出し元のAPIがJSON形式ではなくJSONP形式でデータを返すためです。それらは交換できません。

dataType: 'jsonp'をdataType: 'json'に変更してください。これを試してください：あなたは、あなたのsuccessハンドラ内で生成されたオブジェクトをループする必要があるし、必要な形式でデータを追加します

var AltCoin = "ripple"; 
 
var api_url = "https://api.coinmarketcap.com/v1/ticker/"; 
 

 
$.ajax({ 
 
    method: "GET", 
 
    dataType: "JSON", 
 
    data: AltCoin, 
 
    url: api_url, 
 
    success: function(data) { 
 
    console.log(data); 
 
    //$('#coin_value').html(data); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="article"> 
 
    <h1>Ripple</h1> 
 
    <p id="coin_value">test</p> 
 
    <p></p> 
 
    <p><strong></strong></p> 
 
</article>

。

https://api.coinmarketcap.com/v1/ticker/rippleを呼び出すと、意図しているように見えますが、コードは実行されていません。CORSによってブロックされます。 https://jsfiddle.net/whw29h0g/：

Answer 2

卿あなたが `ERROR`ハンドラを追加する場合は、問題を見ることができ、この私が思うあなたのためにその有用

var AltCoin = "ripple"; 
 
var api_url = "https://api.coinmarketcap.com/v1/ticker/"; 
 

 
$.ajax({ 
 
    method: "GET", 
 
    dataType: "JSON", 
 
    data: AltCoin, 
 
    url: api_url, 
 
    success: function(data) { 
 
    var content=""; 
 
    
 
    $.each(data[0], function(key, value) { 
 
    content+="Key :<b>"+key +"</b> Value :<b>"+value+"</b><br/>"; 
 
}); 
 

 
    $('#coin_value').html(content); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="article"> 
 
    <h1>Ripple</h1> 
 
    <p id="coin_value">test</p> 
 
    <p></p> 
 
    <p><strong></strong></p> 
 
</article>