1

送信する前にいくつかの検証アクションを実行する必要があるフォームがあります。これらのアクションには、ajax呼び出しなどの非同期ステップが含まれます。

送信する前に、すべての検証アクションが完了するまで待機するようにフォームに指示するにはどうすればよいですか？

私の検証関数は次のようになります（擬似コード）：

function preSubmit() {
    // validate field 1
    ajax({
        ...
        onSuccess:...
    });
    // validate field 2
    ajax({
        ...
        onSuccess:...
    });
    // fields 3, 4, etc.
}

私の現在の問題は、onSuccessコールバックが完了する前にフォームが送信されることです。

もちろん、ajax呼び出しを同期させることもできますが、パフォーマンスに影響するため、これを回避しようとしています。

4

4 に答える 4

2

jQueryを使用している場合は、検討することをお勧めしますJQuery.Deferred or Promise

前の呼び出しが完了したとき（成功または失敗したとき）に、各ajax要求（または要求を含む関数）を呼び出します。

$ .whenを使用すると、.thenコールバックによって失敗したリクエストを管理できます。promiseを使用する場合は、さまざまなシナリオで.done .failと.alwaysコールバックを使用できます。

$.when($.ajax("...."), $.ajax("...."))
  .then(...);

資力：

于 2013-02-20T19:13:06.713 に答える
1

理想的には、1つのajaxイベントのみを発生させる必要があります。複数のajaxイベントを含める必要がある場合は、successコールバック関数を使用して非同期リクエストを順番に（同期的に）実行できます。これが例です。

    function preSubmit() {
        $.ajax({
            error: handleError,
            success: stepTwo
        });
    }
    function stepTwo() {
        $.ajax({
            error: handleError,
            success: stepThree
        });
    }
于 2013-02-20T19:02:01.820 に答える
0

「errorMsg」変数を作成し、最初は「waiting」に設定してから、aynchcコードで更新します。

フォーム送信コードで、フィールドの値を確認します。それは「準備ができていない」ということです、提出しないでください。

于 2013-02-20T18:59:55.573 に答える
0

JavaScriptのsettimeout関数を使用できます。コードは次のようになります、

function preSubmit() {
 //set a variable which increments after each Ajax call success.
var successCount=0;
// validate field 1
ajax({
    ...
    onSuccess: function(){
       successCount++; 
    }
});
// validate field 2
ajax({
    ...
     onSuccess: function(){
       successCount++; 
    }
});

  var wait = function(){
      setTimeout(function(){
        // check whether "successCount" is equal to number of validations done
         //here it is 2
        if(successCount==2){
        //call function say,"submitForm" which submit the form
          submitForm();
        }else{
          //All validations are not completed, wait until it completes
          wait();
         }
        },1000);
     }
     wait();
}

このようにして、非同期Ajax呼び出しを効果的に使用できます。

于 2013-02-20T19:21:47.553 に答える