fullcalendar最後にAJAXを読んでください

Question

私はfullcalendarを使用しようとしています。ドラッグする前にイベントを保存しようとしました。しかし、アヤックスは最後に読んだ。以下は私のコードです：

$('#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前を実行することが非常に可能性があります」

addEvent()メソッドに渡すためにサーバからのeventid変数を受け取ることに依存しているため、これは問題を引き起こします。これは、成功したコールバックが実行されるためです。あなたのコードが今のところのところにあるeventidは、を実行すると99.99％が未定義です。

単純な解決策は、これらのコード行を "success"関数内に移動することです。サーバーからの応答が成功するまで実行しないことを保証できます。

$.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：jQueryのが適切あなたの変数をコードの重労働を行うことができますので、私はまた、オブジェクトを渡すためにあなたのdataオプションを変更しました。あなたはこれをする必要はありませんが、より信頼性の高いものです。

デザインノート2：このようにサーバーにデータを送信するためにGETを使用するのは普通ではありません（メソッド名にヒントがあり、データをフェッチすることが考えられます）。通常の規則では、 PUT。しかし、それはあなたのためのデザインの選択です。

デザインノート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/

Answer 2

Ajax呼び出しは非同期であるため、実行中は次のコード行も実行されます。

サーバー側の応答速度によって、終了時に「データ保存」が表示されます。

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

      });