jQuery에 Ajax 요청이 보류 중인지 어떻게 알 수 있습니까?

우리가 만든 jQuery 컨트롤에 몇 가지 문제가 있습니다. 찾고있는 항목의 ID를 입력 할 수있는 드롭 다운 목록이 있고 Enter 키를 누르거나 텍스트 상자에서 포커스를 잃으면 jQuery를 통해 입력 한 ID가 올바른지 확인하고 그렇지 않은 경우 경고를 표시한다고 가정합니다. '티.

문제는 일반 사용자가 유효하지 않은 값을 입력하고 제출 버튼을 눌러 포커스를 잃으면 양식 제출이 전송 된 후 jQuery 게시물이 반환된다는 것입니다.

양식 제출을 허용하지 않도록 jQuery에서 처리하는 비동기 요청이 있는지 확인할 수있는 방법이 있습니까?

ajaxStart 및 ajaxStop 을 사용 하여 요청이 활성 상태 인시기를 추적 할 수 있습니다 .

$.active 활성 Ajax 요청 수를 반환합니다.

여기에 더 많은 정보

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

$ .ajax () 함수는 XMLHttpRequest 객체를 반환합니다. 제출 버튼의 "OnClick"이벤트에서 액세스 할 수있는 변수에 저장합니다. 제출 클릭이 처리되면 XMLHttpRequest 변수가 다음과 같은지 확인하십시오.

1) null, 아직 전송 된 요청이 없음을 의미합니다.

2) readyState 값은 4 (Loaded)입니다. 이는 요청이 성공적으로 전송 및 반환되었음을 의미합니다.

두 경우 모두 true를 반환하고 제출이 계속되도록 허용합니다. 그렇지 않으면 false를 반환하여 제출을 차단하고 사용자에게 제출이 작동하지 않은 이유를 표시합니다. :)

우리는 활용해야 $ .ajax.abort () 요청이 활성화 된 경우 중단 요청 방법. 이 promise 객체는 readyState 속성을 사용 하여 요청이 활성 상태인지 여부를 확인합니다.

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 코드

//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 () {

            }
        });