拉入 JSON 数据答案

【问题标题】：Pull in JSON data拉入 JSON 数据
【发布时间】：2012-02-18 19:20:25
【问题描述】：

我正在尝试使用 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 fiddle，但我无法让它响应 JSON 请求。

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

javascript是：

$(文档).ready(函数() { var dp，事件；事件 = []; 返回 dp = $(".blog_calendar").datepicker({ beforeShowDay：函数（日期）{ var匹配，结果； $.getJSON("https://raw.github.com/gist/1676157/15ce81851e57dfcecb985039e970a749585959de/my.json", 函数(数据) { 返回事件=数据； }); 结果 = [true, "", null]; 匹配 = $.grep（事件，函数（事件）{ 返回 event.Date.valueOf() === date.valueOf(); }); 如果（匹配长度）{ 结果 = [真，“高亮”，空]； } 返回结果； }, onSelect：函数（日期文本）{ var date, event, i, selectedDate; 日期=无效0； selectedDate = new Date(dateText); 我 = 0; 事件=空； while (i

我正在尝试在 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。

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

【问题讨论】：

标签： javascript jquery json jquery-ui

【解决方案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)

【讨论】：

【解决方案2】：

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

【讨论】：

现在这是有道理的，但我不知道如何解决它。我需要在 datepicker 函数中提取 json 数据，以便我可以将多个日历放在同一页面上并请求特定于日历 div 的 id
我正在根据您的建议尝试类似的方法，但仍然无法正常工作：jsfiddle.net/PGmFv/12

【解决方案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('Same domain request') 不会出错。

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

【讨论】：

谢谢，非常感谢——我看到了——所以我不确定如何将 JSON 导入 jsfiddle。更大的问题是请求本身。