Question

我正在尝试从json数据中获取事件日历。我只想突出显示日期，并在日历下方更新div，并在用户点击日期时显示活动详细信息。我的应用程序以以下形式提供JSON：

[
  {"Date":"02/06/2012","Title":"Eat, Bike, and Swim"},
  {"Date":"02/03/2012","Title":"Sleep"},
  {"Date":"02/02/2012","Title":"Laugh"}
]

我有一个JS小提琴，它适用于变量定义，但我不能让它响应JSON请求。

这是我最好的尝试：http://jsfiddle.net/PGmFv/2/

javascript是：

$(document).ready(function() {
  var dp, events;
  events = [];
  return dp = $(".blog_calendar").datepicker({
    beforeShowDay: function(date) {
      var matching, result;
      $.getJSON("https://raw.github.com/gist/1676157/15ce81851e57dfcecb985039e970a749585959de/my.json", function(data) {
        return events = data;
      });
      result = [true, "", null];
      matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
      });
      if (matching.length) {
        result = [true, "highlight", null];
      }
      return result;
    },
    onSelect: function(dateText) {
      var date, event, i, selectedDate;
      date = void 0;
      selectedDate = new Date(dateText);
      i = 0;
      event = null;
      while (i < events.length && !event) {
        date = events[i].Date;
        if (selectedDate.valueOf() === date.valueOf()) {
          event = events[i];
        }
        i++;
      }
      if (event) {
        return alert(event.Title);
      }
    }
  });
});

我正在尝试加载datepicker函数中的json，因为我希望能够在同一页面上有多个日历，并且this.id包含特定的url变量，因此我可以调用$.getJSON('/events/' + this.id + '/data.json',function() {}

任何想法都非常感激。我非常倾向于：Events in jQuery UI Datepicker with json data source和Datepicker with events?，但却无法在正确的时间以正确的方式加载json。

控制台中没有错误没有帮助。

Answer 1

为了从另一个域获取JSON数据，您必须使用带有回调函数的JSONP。 Github API支持此（example），jQuery会自动使用dataType: 'jsonp'进行回调。

这是我如何使用jQuery从Github gist获取JSON数据：

$.ajax({
  url: 'https://api.github.com/gists/'+gistid,
  type: 'GET',
  dataType: 'jsonp'
}).success( function(gistdata) {
  // This can be less complicated if you know the gist file name
  var objects = [];
  for (file in gistdata.data.files) {
    if (gistdata.data.files.hasOwnProperty(file)) {
      var o = JSON.parse(gistdata.data.files[file].content);
      if (o) {
        objects.push(o);
      }
    }
  }
  if (objects.length > 0) {
    // DoSomethingWith(objects[0])
  }
}).error( function(e) {
  // ajax error
});

（jsFiddle）

Answer 2

相当多的代码需要深入研究，但是你不是在进行异步调用然后尝试从匿名函数返回一个值吗？在启动 getJSON之后尝试使用events，但在实际获取数据之前可能还有很多？

Answer 3

此错误即将发生，因为请求

 $.getJSON("https://raw.github.com/gist/1676157/15ce81851e57dfcecb985039e970a749585959de/my.json")

不在同一个域中。所以console.log（）显示此错误

  Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

运行$ .getJSON（'同一域请求'）将不会导致错误。

查看小提琴并查看控制台错误消息。 http://jsfiddle.net/PGmFv/10/

引入JSON数据

3 个答案: