Hai yêu cầu ajax trên cùng một sự kiện cùng một lúc. hành vi điển hình là gì? khác nhau như thế nào nếu yêu cầu đồng bộ

Question

Trong mã javascript sau, tôi gửi hai yêu cầu Ajax cùng một lúc.
Sau khi phân tích bằng Firebug, tôi đã đưa ra kết luận không bình thường rằng:
"phản hồi trước đó (Ajax) sẽ đến trước là in" mới nhất.

Bài toán 2: nếu tôi gán đích url Ajax cho chuỗi ngẫu nhiên (nói "abcd") [không tồn tại] thì tổng số cuộc gọi ajax sẽ tăng lên 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"); 
     }   
    }); 
    }); 
}); 

Vui lòng tham khảo Fiddle sau đây.

Answer 1

Tôi không chắc mình hoàn toàn hiểu, nhưng tôi sẽ cố gắng cung cấp cho bạn một số thông tin. Giống như David nói Có vẻ như yêu cầu đầu tiên là yêu cầu cuối cùng, nhưng điều đó sẽ thay đổi trong nhiều trường hợp. Có nhiều cách khác nhau bạn có thể thực hiện việc này để kiểm soát kết quả hoặc thứ tự của các yêu cầu.

1) Sau khi thành công của yêu cầu đầu tiên, bạn có thể bắt đầu yêu cầu thứ hai. Tôi không khuyên bạn nên sử dụng cho mục đích tốc độ vì yêu cầu của bạn không chạy song song.

$.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) Nếu bạn cần có cả hai yêu cầu phản hồi cùng một lúc, phương pháp ưa thích có khả năng là jQuery hoãn lại. Điều này sẽ làm cho cả hai yêu cầu chạy song song, và một khi cả hai câu trả lời được nhận, bạn có thể tiến hành như bạn sẽ có.

như thế này:

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

Check-out:

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

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

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

Tôi hy vọng điều này sẽ giúp!

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

Answer 3

Gaurav, bạn có một lỗi, vào cuối ngày 1 $ .ajax nó phải kết thúc như ), và 2 như ).

Bạn không thể kết thúc với ;

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 4

Hoặc sử dụng server_response trong mã của bạn. Tập lệnh bắt đầu với điều kiện:

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