Làm cách nào để biết jQuery có yêu cầu Ajax đang chờ xử lý không?

Question

Tôi đang gặp một số vấn đề với điều khiển jQuery mà chúng tôi đã thực hiện. Giả sử bạn có danh sách thả xuống cho phép bạn nhập ID của mục bạn đang tìm kiếm và khi bạn nhấn ENTER hoặc mất tiêu điểm trong hộp văn bản, nó xác thực qua jQuery rằng ID bạn đã nhập là chính xác, hiển thị cảnh báo nếu nó không 't.

Vấn đề là khi người dùng thông thường nhập giá trị không hợp lệ vào đó và mất tiêu điểm bằng cách nhấn nút gửi, bài đăng jQuery sẽ trả về sau khi gửi biểu mẫu đã được gửi.

Có cách nào để tôi có thể kiểm tra xem có bất kỳ xử lý yêu cầu Async nào của jQuery để tôi không cho phép gửi biểu mẫu không?

Answer 1

Bạn có thể sử dụng ajaxStart và ajaxStop để theo dõi thời điểm yêu cầu đang hoạt động.

Answer 2

Hàm $ .ajax() trả về một đối tượng XMLHttpRequest. Lưu trữ trong một biến có thể truy cập từ sự kiện "OnClick" của nút Gửi. Khi nộp nhấp chuột được xử lý kiểm tra xem nếu biến XMLHttpRequest là:

1) null, có nghĩa là không có yêu cầu đã được gửi đi chưa

2) rằng giá trị readyState là 4 (Loaded). Điều này có nghĩa là yêu cầu đã được gửi và trả về thành công.

Trong cả hai trường hợp đó, trả về true và cho phép gửi tiếp tục. Nếu không, trả về false để chặn gửi và cung cấp cho người dùng một số dấu hiệu cho thấy lý do gửi của họ không hoạt động. :)

Answer 3

$.active trả về số lượng yêu cầu Ajax đang hoạt động.

Thông tin thêm here

Answer 4

$(function() { 
     function checkPendingRequest() { 
      if ($.active > 0) { 
       window.setTimeout(checkPendingRequest, 1000); 
       //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active); 
      } 
      else { 

       alert("No hay peticiones pendientes"); 

      } 
     }; 

     window.setTimeout(checkPendingRequest, 1000); 
}); 

Answer 5

fiddle này sử dụng phương pháp $ .ajax.abort() để hủy bỏ yêu cầu nếu nó đang hoạt động. Nó sử dụng tài sản readyState để kiểm tra xem yêu cầu có hoạt động hay không.

Đây là Working Fiddle

HTML

<h3>Cancel Ajax Request on Demand</h3> 
<div id="test"></div> 
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" /> 

JS Mã

//Initial Message 
var ajaxRequestVariable; 
$("#test").html("Please wait while request is being processed.."); 

//Event handler for Cancel Button 
$("#btnCancel").on("click", function(){ 
if (ajaxRequestVariable !== undefined) 

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4) 
{ 
    ajaxRequestVariable.abort(); 
    $("#test").html("Ajax Request Cancelled."); 
} 
}); 

//Ajax Process Starts 
ajaxRequestVariable = $.ajax({ 
      method: "POST", 
      url: '/echo/json/', 
      contentType: "application/json", 
      cache: false, 
      dataType: "json", 
      data: { 
     json: JSON.encode({ 
     data: 
      [ 
          {"prop1":"prop1Value"}, 
        {"prop1":"prop2Value"} 
        ]   
     }), 
     delay: 11 
    }, 

      success: function (response) { 
      $("#test").show(); 
      $("#test").html("Request is completed");   
      }, 
      error: function (error) { 

      }, 
      complete: function() { 

      } 
     });