javascript - fullcalendar 最后读取 ajax

Question

我正在尝试使用全日历。我尝试在事件拖动之前保存该事件。但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 调用异步运行，因此它们与页面上的其他脚本并行执行。当您调用 $.ajax 命令时，它会启动一个单独的代码线程来进行调用并等待响应。与此同时，外部函数的其余部分继续执行。

因此，考虑到调用服务器和接收响应通常会涉及时间延迟，无论延迟有多小，紧随 $.ajax 命令之后的代码行(在本例中 console.log('add event'); addEvent(eventDetails, eventid); 将在 ajax“成功”回调运行之前执行，因为这只在服务器返回回应。

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

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

$.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 甚至是放。但这是您的设计选择。

设计说明 3:您可能还需要考虑根据 jQuery ajax 文档添加“错误”回调来处理来自服务器的任何错误，然后您可以在出现任何网络问题或数据时显示用户友好的消息验证错误(您正在服务器上验证您的数据，对吧？如果不是，您真的应该这样做，以防止恶意或简单的无效输入。)。如果您需要在成功响应后通常会执行的错误操作(例如，关闭模式，或更新某些 UI 或其他内容。请参阅http://api.jquery.com/jQuery.ajax/

设计说明 4:.unbind() 被更高级的 .off() 取代(及其孪生 .bind())早在 jQuery 1.7 中就被 .on() 方法取代。从 jQuery 3.0 开始，它已被正式弃用，因此您可以预期它将来会被删除。我将改用 .off ()(如果需要，还有 .on())。请参阅 http://api.jquery.com/unbind/