Question

我正在创建一个crowfunder页面，并希望创建一个显示当前进度的仪表板：http://hyve.me/crowdfunder

这是我使用的JavaScript：

<script type="text/javascript">
  // Facebook Likes
  $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
    $("#facebooklikes").text(response["hyve.me"].likes);
  });

  // registered Users
  $.ajax({
    type: 'GET',
    url: 'http://www.hyve.me/usercount',
    dataType: 'JSON',
    success: function (response) {
      $("#usercount").text = response;
    }
  });

  // days left
  jQuery(document).ready(function($) {
    today = new Date();
    deadline = new Date("October 31, 2013");
    msPerDay = 24 * 60 * 60 * 1000 ;
    timeLeft = (deadline.getTime() - today.getTime());
    $("#countdown").text(Math.floor(timeLeft / msPerDay));
  });

  // progress bar for shares
  $.getJSON("https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F", function (response) {
    var mentions = response.shares;
    document.getElementById("myProgressBar_Success").setAttribute('style', "width: " + (mentions / 6).toString() + "%;");
    document.getElementById("myProgressBar_Warning").setAttribute('style', "width: " + ((600 - mentions) / 6).toString() + "%;");
  });
</script>

，这是仪表板的HTML：

<div class="span8 offset2">
  <div class="row-fluid statistics">
    <div class="span4"><div class="linediv-l"><h3 id="facebooklikes">0</h3><p>FB <i class="icon-thumbs-up"></i></p></div></div>
    <div class="span4"><div class="linediv-c"><h3 id="usercount">0</h3><p>Hyve-Users</p></div></div>
    <div class="span4"><div class="linediv-r"><h3 id="countdown">0</h3><p>days left</p></div></div>
  </div>
</div>
<div class="row-fluid">
  <div class="span10 offset1">
    <div class="thermometer progress active">
      <div class="bar bar-success" style="width: 50%;" id="myProgressBar_Success"></div>
      <div class="bar bar-warning" style="width: 50%;" id="myProgressBar_Warning"></div>
    </div>
  </div>
</div>

现在我有很多问题：

Facebook Likes的数量在Chrome（v29）和Firefox（v23）中正确显示，但在Internet Explorer（v9）中没有显示 - 有关如何使此浏览器独立的任何想法吗？
只有当我在同一个域（hyve.me）时，注册用户的数量才有效;因此，我只能在生产中测试这个，但不能在开发（AWS）或登台（heroku.com）上测试 - 任何想法如何解决这个问题？
进度条未根据addthis.com的数据进行更新 - 为什么getJSON（）与Facebook-Graph一起使用而不与AddThis的web服务一起使用？

这是我关于Stackoverflow的第一个问题，我花了最近2天才找到答案。也许有人可以指出我正确的方向。

提前致谢！

-Christoph

Answer 1

所以这可能会回答所有三个问题。

$(function(){


   // Facebook Likes
   $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
        $("#facebooklikes").text(response["hyve.me"].likes);
   });

   // registered Users
   $.ajax({
       type: 'GET',
       url: 'http://www.hyve.me/usercount',
       dataType: 'jsonp',
       success: function (response) {
            $("#usercount").text = response;
       }
   });

   // progress bar for shares
   $.ajax({
       type: 'GET',
       url: 'https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F',
       dataType: 'jsonp',
       success: function (response) {
           var mentions = response.shares;
           $("#myProgressBar_Success").css({ width: (mentions / 6) + "%" });
           $("#myProgressBar_Warning").css({ width: ((600 - mentions) / 6) + "%" });
       }
   });

   // days left
   today = new Date();
   deadline = new Date("October 31, 2013");
   msPerDay = 24 * 60 * 60 * 1000 ;
   timeLeft = (deadline.getTime() - today.getTime());
   $("#countdown").text(Math.floor(timeLeft / msPerDay));

});

当您尝试通过ajax从您自己的域以外的域访问数据时，您遇到了跨域问题。请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript以获取更深入的详细信息。

使用jQuery.ajax方法时，您可以将dataType指定为jsonp。请参阅this answer for more about JSONP。

看看this answer似乎虽然在没有JSONP的情况下通常允许跨源GET请求，但有时它们不是。

所以数据没有加载;因此，永远不会得到更新你的HTML的价值。

我还调整了你的AddThis回调，使用jQuery进行DOM操作而不是getElementByID。这可能是导致你的IE错误。如果您已经在使用jQuery，那么最好保持与操作DOM的方式保持一致。

使用Javascript访问各种Web服务

1 个答案: