ฉันจะทราบได้อย่างไรว่า jQuery มีคำขอ Ajax ที่รอดำเนินการอยู่

ฉันมีปัญหากับการควบคุม jQuery ที่เราทำ สมมติว่าคุณมีรายการแบบเลื่อนลงที่ให้คุณป้อน ID ของรายการที่คุณกำลังมองหาและเมื่อคุณกด ENTER หรือสูญเสียโฟกัสในกล่องข้อความระบบจะตรวจสอบความถูกต้องผ่าน jQuery ว่า ID ที่คุณป้อนนั้นถูกต้องโดยจะแสดงการแจ้งเตือนหากไม่มี 't.

สิ่งนี้ก็คือเมื่อผู้ใช้ทั่วไปป้อนค่าที่ไม่ถูกต้องในนั้นและสูญเสียโฟกัสโดยการกดปุ่มส่งโพสต์ jQuery จะส่งคืนหลังจากส่งแบบฟอร์มแล้ว

มีวิธีใดบ้างที่ฉันสามารถตรวจสอบว่ามีการประมวลผลคำขอ Async โดย 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) นั่นหมายความว่าได้ส่งคำขอและส่งคืนเรียบร้อยแล้ว

ไม่ว่าในกรณีใดก็ตามให้ส่งคืนจริงและอนุญาตให้ส่งต่อไป มิฉะนั้นจะส่งคืนเท็จเพื่อบล็อกการส่งและแจ้งให้ผู้ใช้ทราบว่าเหตุใดการส่งจึงไม่ได้ผล :)

เราต้องใช้วิธี$ .ajax.abort ()เพื่อยกเลิกคำขอหากคำขอนั้นทำงานอยู่ วัตถุสัญญานี้ใช้คุณสมบัติ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 () {

            }
        });