时间戳

首页 > 解决方案 > AJAX 获取请求和 javascript

javascript - AJAX 获取请求和 javascript

问题描述

对javascript非常陌生。我不太确定如何解释这一点，所以希望我下面的示例能够解释我所做的事情：

  let events = {
    '04-23-2018' : '<a href="http://tympanus.net/codrops/2012/11/23/three-script-updates/">Three Script Updates</a>',
    '04-21-2018' : '<a href="http://tympanus.net/codrops/2012/11/21/adaptive-thumbnail-pile-effect-with-automatic-grouping/">Adaptive Thumbnail Pile Effect with Automatic Grouping</a>',
    '04-20-2018' : '<a href="http://tympanus.net/codrops/2012/11/20/learning-principles-for-improving-your-css/">Learning Principles for Improving Your CSS</a>',
    '04-19-2018' : '<a href="http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/">Responsive CSS Timeline with 3D Effect</a>'
  };

  $.get( "/api/events").done(function( data ) {
    events["04-26-2018"] = '<a href="http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">BING BONG BONG SSSSS</a><a href="http://tympanus.net/codrops/2012/04/30/im-creator-giveaway/">IM Creator Giveaway</a>';
  });

在上面的获取请求中，我正处于调试阶段。我只是传递一些变量来测试获取请求的异步/承诺性质。

再往下，我的脚本中有以下内容：

let cal = $calendar.calendario({
  onDayClick : function( $el, $contentEl, dateProperties ) {
    if( $contentEl.length > 0 ) {
     showEvents( $contentEl, dateProperties );
    }
  },
  caldata : events,
  displayWeekAbbr : true
});

我将 caldata 设置为事件。

但是，caldata 只包含第一个对象——而不是我从 get 请求的 done 函数中添加的键值对......

如何在声明 let cal 之前将收集的数据传回？我尝试在声明 Events["04-26-2018"] 键后声明 let cal 但是脚本中的其他函数也需要这个 let cal？如此困惑，真的需要一些提示。

谢谢你。

标签： javascriptajaxget

解决方案

初始化时不要赋值，回调成功后赋值caldata如下图：

let cal = $calendar.calendario({
  onDayClick : function( $el, $contentEl, dateProperties ) {
    if( $contentEl.length > 0 ) {
     showEvents( $contentEl, dateProperties );
    }
  },
  displayWeekAbbr : true
});

$.get( "/api/events").done(function( data ) {
    events["04-26-2018"] = '<a href="http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">BING BONG BONG SSSSS</a><a href="http://tympanus.net/codrops/2012/04/30/im-creator-giveaway/">IM Creator Giveaway</a>';
    cal.caldata = events;
  });

推荐阅读