ส่งข้อมูลไปยัง API ด้วย jQuery AJAX เมื่อคลิกปุ่ม

โค้ดนี้เป็นตัวอย่างการใช้งาน jQuery AJAX สำหรับส่งข้อมูลไปยัง API ด้วยเมธอด POST เมื่อผู้ใช้คลิกปุ่ม โดยระบบจะส่งค่า status = "active" ไปยัง endpoint /api/users/by-status จากนั้นจะรับผลลัพธ์ที่ตอบกลับมาเพื่อนำไปใช้งานต่อ หากการเรียก API สำเร็จ ระบบจะแสดงผลลัพธ์ใน Console และหากเกิดข้อผิดพลาดจะแสดงข้อความ Error เพื่อช่วยในการตรวจสอบและแก้ไขปัญหา

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function () {
    $("#btnSubmit").click(function () {
        $.ajax({
            url: "/api/users/by-status",   
            type: "POST",                  
            data: { status: "active" },    
            success: function (response) {
                console.log("Success:", response);
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    });
});
</script>

<button id="btnSubmit">Send AJAX</button>

เหมาะสำหรับการใช้งานในระบบเว็บที่ต้องการดึงหรือกรองข้อมูลแบบไม่ต้องรีเฟรชหน้า (Asynchronous Request)