同时针对同一事件的两个 ajax 请求。典型的行为应该是什么？如果请求是同步的，会有什么不同

Question

在下面的 javascript 代码中，我同时发送了两个 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");
      }           
    }); 
  });
});

请参考以下Fiddle。

Answer 1

Gaurav，你有一个错误，在第一个 $.ajax 的末尾，它必须以 ), 和第二个 ) 结尾。

你不能以;结束

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

Answer 2

我不确定我是否完全理解，但我会尽力为您提供一些信息。正如大卫所说，第一个请求似乎是最后一个响应，但在许多情况下会有所不同。您可以通过多种方式来控制请求的结果或顺序。

1) 第一个请求成功后，您可以发起第二个请求。出于速度目的，我不建议这样做，因为您的请求不是并行运行的。

$.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 deferred。这将使两个请求并行运行，一旦收到两个响应，您就可以继续进行。

类似这样的：

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/

我希望这会有所帮助！

Answer 3

或者在你的代码中使用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();      
        }           
    });
}

Answer 4

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