우리가 만든 jQuery 컨트롤에 몇 가지 문제가 있습니다. 찾고있는 항목의 ID를 입력 할 수있는 드롭 다운 목록이 있고 Enter 키를 누르거나 텍스트 상자에서 포커스를 잃으면 jQuery를 통해 입력 한 ID가 올바른지 확인하고 그렇지 않은 경우 경고를 표시한다고 가정합니다. ‘티.
문제는 일반 사용자가 유효하지 않은 값을 입력하고 제출 버튼을 눌러 포커스를 잃으면 양식 제출이 전송 된 후 jQuery 게시물이 반환된다는 것입니다.
양식 제출을 허용하지 않도록 jQuery에서 처리하는 비동기 요청이 있는지 확인할 수있는 방법이 있습니까?
답변
답변
$.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 () {
}
});