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);
                    }
                });

           });