สอบถามทำ ajax เพื่อทำเช็คสถานะจาก api omise แบบทำงานเบื้องหลังเว็บ

[eange08]

ต้องการทำ ajax เพื่อยิงไป api ของ omise เช็คสถานะเป็นระยะๆ อาจจะห่างกัน 2 - 3 วินาทีนะคะ โดยที่
- ไม่กดปุ่ม submit ให้อยู่ที่หน้าเว็บนั้น แล้วทำอยู่งานอยู่เบื้องหลัง อัตโนมัติเลย
- เป็น pending อยู่ยังให้อยู่หน้าเดิมแล้วยิง api เช็คสถานะต่อไปจนกว่าจะเป็น sucess
- ถ้าเป็น sucess จะให้ redirect ไปหน้าต่อไป

Selection_999(321).png (31.79 KiB) Viewed 2162 times

ถามใน chatGPT ได้วิธีแบบนี้ใช้ได้หรือเปล่าค่ะ
คำถาม

ถามรอบแรก : write ajax check status from api not refresh wrb
รอบ 2 : ให้ ajax เช็คตอนอยู่ที่หน้าเว็บ ไม่ต้องกดปุ่ม

หากคุณต้องการให้ AJAX เช็คสถานะ API โดยอัตโนมัติเมื่อผู้ใช้อยู่ที่หน้าเว็บโดยไม่ต้องกดปุ่ม คุณสามารถใช้ setInterval เพื่อทำงานแบบวนรอบโดยตรงที่ระหว่างหน้าเว็บดังนี้:

โค้ด: เลือกทั้งหมด

<p>Status: <span id="status">Loading...</span></p>

<script>
  // Function to check the status
  function checkStatus() {
    $.ajax({
      type: "GET",
      url: "https://api.example.com/status", // Replace with your API endpoint
      success: function (data) {
        if (data.status === "ok") {
          $("#status").text("API is online");
        } else {
          $("#status").text("API is offline");
        }
      },
      error: function () {
        $("#status").text("Error: Unable to check the API status");
      }
    });
  }

  // Start checking status every 2 seconds when the page loads
  $(document).ready(function () {
    checkStatus(); // Initial check
    setInterval(checkStatus, 2000); // 2000 milliseconds = 2 seconds
  });
</script>

ในตัวอย่างนี้:

เราใช้ setInterval เพื่อเรียก checkStatus ทุก 2 วินาที.
หากคุณต้องการเรียก checkStatus ทันทีเมื่อหน้าเว็บโหลดเสร็จ คุณสามารถใช้ checkStatus(); เพื่อเรียกฟังก์ชันเมื่อหน้าเว็บโหลดเสร็จ.
และคุณควรแทนที่ URL API "https://api.example.com/status" ด้วย URL จริงของ API ที่คุณต้องการเช็คสถานะ.

[mindphp]

setInterval อย่างเดียวใช้ไม่ได้ครับ
ลองดู
ตัวอย่าง Loop Ajax Request

โค้ด: เลือกทั้งหมด

<script>
var counter = 0;

window.getData=function()
{
    /* This IF block has nothing to do with the OP. It just resets everything so the demo can be ran more than once. */
    if (counter===5) {
        $('.quoteList').empty();
        counter = 0;
    }

    $.ajax({
        /* The whisperingforest.org URL is not longer valid, I found a new one that is similar... */
        url:'http://quotes.stormconsultancy.co.uk/random.json',
        async: true,
        dataType: 'jsonp',
        success:function(data){
            $('.quoteList').append('<li>' + data.quote +'</li>');
            counter++;
            if (counter < 5) getData();
        }
    });
}
</script>

Keyword คือ async
อีกแบบ

โค้ด: เลือกทั้งหมด

function consolePrint() {
        var _array = [1, 2, 3, 4, 5, 6, 7];
        var tblStructure =
            "<table style='border:1px solid'><thead>This is generated after multiple ajax calls within a loop</thead>";
        var allAJAX = _array.map(m => {
            return $.ajax(
                "https://abc.mockapi.io/LoremIpsum/1/users/" +
                    m
            ).done(function(data) {
                tblStructure +=
                    "<tr><td>" + data.id + "). " + data.name + "</td></tr>";
                console.log(data.id);
            });
        });
        Promise.all(allAJAX).then(function() {
            $("#disp")[0].innerHTML = tblStructure;
            console.log("This is completed");
        });
    }

เพิ่มเติมเรื่อง Promise
viewtopic.php?t=80712

ajax request loop ควรมีการกำหนดไว้เช่น ไม่เกิน 10 รอบ เพื่อป้องกัน server ทำงานหนัก

[eange08]

ใช้ loop เข้ามาช่วยให้ทำงาน 10 ครั้ง เกินจากนั้นใช้คำสั่ง clearInterval หยุด setInterval

โค้ด: เลือกทั้งหมด

<script>
    $(document).ready(function () {
        checkStatus(); // Initial check
        intervalId = setInterval(checkStatus, 5000); 
   });
   
    function checkStatus(){
    var url_check = $('input[name="u_check_opn"]').val();
    var run_check = $('input[name="run_check"]').val();
    data2 = {test:1234};
    $.ajax({
                     type:'get',
                     url:url_check,             
                     data:data2, 
                     contentType: false,
                     cache:false,
                     processData: false,
                     success:function(result){

                          if(result.STATUS == 'successful'){
                                clearInterval(intervalId);

                          }else if(run_check <10){
                              run_check++;
                              $('input[name="run_check"]').val(run_check);
                          }else if(run_check >= 10){
                              clearInterval(intervalId);
                              $('input[name="run_check"]').val("N");
              
                          }
                     }
               });
    }
</script>