fullcalendar最后阅读ajax

Question

我正在尝试使用fullcalendar。 我试图在拖动之前保存事件。 但是ajax最后读了。 下面是我的代码：

$('#event_add').unbind('click').click(function() {
                title = $('#event_title').val();
                event_url = $('#event_url').val();
                stime = $('#event_stime_hr').val() + ':' + $('#event_stime_min').val();
                etime = $('#event_etime_hr').val() + ':' + $('#event_etime_min').val();
                allday = $('#chkallday').val();
                eventTime = '';
                if(stime.length > 1){
                    stime = stime + ' ' + $('#optstime').val();
                    eventTime = stime;
                    if(etime.length > 1){
                        etime = etime + ' ' + $('#optetime').val();
                        eventTime = eventTime + ' to ' + etime;
                    }
                }

                if(title.length===0){
                    $('#erreventtitle').html('Event title is required');
                }else{
                    $('#erreventtitle').html('');
                    var eventDetails = eventTime + ' ' + title;
                    var eventid = null;
                    $.ajax ({
                        type: "GET",
                        url: "calendar/save?",
                        data: 'title='+title+'&stime='+stime+'&etime='+etime+'&allday='+allday+'&bgcolor=&url='+event_url,
                        cache: false,
                        success: function(data){
                            eventid = data;
                            console.log(data);
                            console.log('savedata');
                        }
                    });
                    console.log('add event');
                    addEvent(eventDetails, eventid);
                }

            });

控制台中的输出。

add event
save data

我不知道为什么ajax代码最后读。 感谢您的帮助。

Answer 1

Ajax调用是异步的，因此在执行时，以下代码行也在执行。

根据服务器端的响应速度，完成后将打印“保存数据”。

Answer 2

Ajax调用异步运行，因此它们与页面上的其他脚本并行执行。 当您调用$.ajax命令时，它将触发一个单独的代码线程以进行调用并等待响应。 同时，其余外部函数将继续执行。

因此，考虑到调用服务器并接收响应通常会涉及一个时间延迟，无论该延迟多么小，但极有可能是$.ajax命令后面的代码行（在本例中为console.log('add event'); addEvent(eventDetails, eventid);将在 ajax“成功”回调运行之前执行，因为这仅在服务器返回响应后才发生。

这将给您带来一个问题，因为您依赖于接收来自服务器的eventid变量，以便将其传递给addEvent()方法。 现在，代码的方式为eventid 99.99％，在您运行addEvent()时肯定是未定义的。

一种简单的解决方案是将这些代码行移至“成功”函数中，因此您可以保证在服务器成功响应之前，它们不会执行。

$.ajax ({
  type: "GET",
  url: "calendar/save?",
  data: { "title": title, "stime": stime, "etime", etime, "allday": allday, "bgcolor": bgcolor, "url": event_url },
  cache: false,
  success: function(data){
    var eventid = data;
    console.log(data);
    console.log('savedata');
    console.log('add event');
    addEvent(eventDetails, eventid);
  }
});

设计说明1：我还更改了data选项以传递对象，因此jQuery可以对编码变量进行适当的繁重工作。 您不必执行此操作，但是它更可靠。

设计说明2：像这样使用GET向服务器发送数据是非常规的（方法名称中的线索是，它的意图是获取数据），通常的惯例是使用POST甚至是PUT。 但这是您的设计选择。

设计说明3：您可能还想考虑通过按照jQuery ajax文档添加“错误”回调来处理服务器中的任何错误，然后在出现任何网络问题或数据验证错误时可以显示一条用户友好的消息（您正在验证服务器上的数据，对吗？如果不是，那么就应该防止恶意或简单的无效输入。） 如果在发生错误的情况下需要执行类似在成功响应后通常可能会执行的操作（例如，关闭模式或更新某些UI或其他操作），这也可能会有所帮助。 参见http://api.jquery.com/jQuery.ajax/

设计说明4： .unbind()是由上级取代.off()和它的孪生兄弟， .bind()被替换.on()方法的jQuery 1.7回来的路上在jQuery 3.0的它的正式弃用，因此你。可以期望它将来被删除。我会切换到使用.off()和.on()如果需要的话），只要你能。见http://api.jquery.com/unbind/

Answer 3

                $.ajax ({
                    type: "GET",
                    url: "calendar/save?",
                    data: 'title='+title+'&stime='+stime+'&etime='+etime+'&allday='+allday+'&bgcolor=&url='+event_url,
                    cache: false,
                    success: function(data){
                        eventid = data;
                        console.log(data);
                        console.log('savedata');
                        addEvent(eventDetails, eventid);
                    }
                });

           });