使用jQuery使用Web服务

时间:2017-07-18 11:02:57

标签: javascript jquery web-services get

我正在尝试运行下面的代码,但没有任何反应。

我在开发者选项中的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>

脚本非常基本。

2 个答案:

答案 0 :(得分:3)

问题是因为您调用的API以JSON格式返回数据,而不是JSONP。它们是不可互换的。

要解决此问题,请将dataType: 'jsonp'更改为dataType: 'json'。试试这个:

&#13;
&#13;
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);
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

您需要在success处理程序中循环遍历结果对象,并以所需格式附加数据。

另请注意,如果您打算https://api.coinmarketcap.com/v1/ticker/ripple - 正如您似乎想要的那样,但代码没有 - 那么您将被CORS阻止。

答案 1 :(得分:1)

先生,请试试这个我觉得它对你有帮助

&#13;
&#13;
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);
  }
});
&#13;
<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>
&#13;
&#13;
&#13;