web-dev-qa-db-ja.com

同じイベントで同時に2つのajaxリクエスト。典型的な行動はどうあるべきですか？リクエストが同期している場合の違い

次のJavaScriptコードでは、2つのAjaxリクエストを同時に送信しています。
Firebugを使用して分析した後、私は次のような異常な結論に達しました。
"（Ajax）応答が最初に来るのは、最後に印刷する"。

問題2：AjaxのURL宛先をランダムな文字列（「abcd」など）に割り当てた場合[存在しない]、ajaxの総数通話は3に増えますか？

$(document).ready(function(e) {

  $("form[ajax=true]").submit(function(e) {

    e.preventDefault();

    var form_data = $(this).serialize();
    var form_url = $(this).attr("action");
    var form_method = $(this).attr("method").toUpperCase();

    $("#loadingimg").show();

    $.ajax({
      url: form_url, 
      type: form_method,      
      data: form_data,     
      cache: false,
      success: function(returnhtml){                          
        alert ("a");
        // $("#result").html(returnhtml); 
        // $("#loadingimg").hide();                    
      }           
    });   

    $.ajax({
      url: form_url, 
      type: form_method,      
      data: form_data,     
      cache: false,
      success: function(returnhtml){                          
        // $("#duplicate").html(returnhtml); 
        // $("#loadingimg").hide();
        alert("b");
      }           
    }); 
  });
});

以下を参照してください フィドル 。

javascriptjqueryajaxfrontend
7
atom217

Gaurav、エラーがあります。最初の$ .ajaxの終わりには、),で終わり、2番目は)で終わる必要があります。

;で終わることはできません

var result1;
var result2;
$.when(
    $.ajax({ // First Request
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){     
                result1 = returnhtml;                  
        }           
    }),

    $.ajax({ //Seconds Request
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){                          
            result2 = returnhtml;     
        }           
    })

).then(function() {
    $('#result1').html(result1);
    $('#result2').html(result2);
});
15
GOAlves

完全に理解できるかどうかはわかりませんが、いくつかの情報を提供しようと思います。デビッドが言ったように、最初のリクエストが最後のリクエストであるように見えるかもしれませんが、それは多くの状況下で異なります。リクエストの結果や順序を制御するためにこれを行うには、さまざまな方法があります。

1）最初のリクエストが成功すると、2番目のリクエストを開始できます。リクエストが並行して実行されていないため、速度を上げるためにこれをお勧めしません。

$.ajax({ // First Request
    url: form_url, 
    type: form_method,      
    data: form_data,     
    cache: false,
    success: function(returnhtml){     
        $.ajax({ //Seconds Request
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnhtml){                          
               // $("#duplicate").html(returnhtml); 
               // $("#loadingimg").hide();
                alert("b");
            }           
        }); 
       alert ("a");
       // $("#result").html(returnhtml); 
       // $("#loadingimg").hide();                    
       }           
    });

2）両方のリクエストに同時に応答する必要がある場合は、jQueryを延期することをお勧めします。これにより、両方のリクエストが並行して実行され、両方のレスポンスを受信したら、そのまま続行できます。

このようなもの：

var result1;
var result2;
$.when(
    $.ajax({ // First Request
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){     
                result1 = returnhtml;                  
        }           
    }); 

    $.ajax({ //Seconds Request
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){                          
            result2 = returnhtml;     
        }           
    }); 

).then(function() {
    $('#result1').html(result1);
    $('#result2').html(result2);
});

チェックアウト：

https://api.jquery.com/jQuery.when/

http://api.jquery.com/deferred.then/

https://api.jquery.com/deferred.done/

これがお役に立てば幸いです。

4
wrxsti

または、コードでserver_responseを使用します。スクリプトは条件で始まります：

if (recherche1.length>1) {
    $.ajax({ // First Request
        type :"GET",
        url : "result.php",
        data: data,     
        cache: false,
        success: function(server_response){     
            $('.price1').html(server_response).show();                  
        }           
    }),

    $.ajax({ //Seconds Request
        type :"GET",
        url : "result2.php",
        data: data,     
        cache: false,
        success: function(server_response){                          
            $('.price2').html(server_response).show();      
        }           
    });
}
1
Franklin CI