AJAX รับค่าจาก PHP ด้วย success: function

AJAX รับค่าจาก PHP ด้วย success: function บทความนี้สอนการรับค่าการประมวลผลจาก PHP ด้วยคำสั่ง success: function เพื่อนำค่ามาแสดงที่ div บนเว็บไซต์ที่ต้องการ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง AJAX รับค่าจาก PHP ด้วย success: function

<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    let a = 10;
    let b = 20;
    let data = { a: a, b: b };
    $.ajax({
        type: "POST",
        url: "cal.php",
        data: data,
        success: function( data ) {
            $("#result").html( data );
        }
    });
</script>

<?php
    // ไฟล์ cal.php
    isset( $_POST['a'] ) ? $a = $_POST['a'] : $a = "";
    isset( $_POST['b'] ) ? $b = $_POST['b'] : $b = "";
    echo "ค่าจาก PHP คือ ".$a." + ".$b." = ".( $a + $b ); 
?>

ผลลัพธ์

ค่าจาก PHP คือ 10 + 20 = 30

AJAX รับค่าจาก PHP จากตัวอย่างส่งตัวแปร a และ b ไปบวกกันที่ PHP และให้ไฟล์ cal.php ทำการ return ค่ากลับมาด้วยคำสั่ง echo จากนั้นใน jQuery ให้ใช้คำสั่ง success: function( data ) โดยผลลัพธ์จาก PHP จะถูกเก็บไว้ในตัวแปรชื่อ data เพื่อนำตัวแปร data มาแสดงผลที่ div id = result หรือนำไปทำงานต่อตามที่ต้องการ