AJAX ส่งหลายค่าแบบ post ด้วย jQuery

AJAX ส่งหลายค่าแบบ post ด้วย jQuery บทความนี้สอนการส่งตัวแปรแบบหลายตัวแปร หรือหลายค่า ผ่าน AJAX ด้วย jQuery Framework โดยเป็นการส่งข้อมูลแบบ post พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง AJAX ส่งหลายค่าแบบ post ด้วย jQuery

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    let data = { a: '123', b: '456' };
    $.ajax({
        type: "POST",
        url: "submit.php",
        data: data,
        success: function( data ) {
            console.log( data );
        }
    });
</script>

<?php
    // ไฟล์ submit.php
    isset( $_POST['a'] ) ? $a = $_POST['a'] : $a = "";
    isset( $_POST['b'] ) ? $b = $_POST['b'] : $b = "";
    echo "ตัวแปร a คือ {$a} / ตัวแปร b คือ {$b}";
?>

ผลลัพธ์

ตัวแปร a คือ 123 / ตัวแปร b คือ 456

AJAX ส่งหลายค่าแบบ post ด้วย jQuery จากตัวอย่างสร้างตัวแปร data เก็บค่าไว้ 2 ตัว คือ a = 123 และ b = 456 จากนั้นนำตัวแปร data ไปกำหนดที่ คำสั่ง data: ของ jQuery เพื่อใช้สำหรับการส่งข้อมูลไปที่ไฟล์ submit.php โดยที่ไฟล์ submit.php จะรับค่าตัวแปรทั้ง 2 ด้วย $_POST พร้อมกับ return ค่ากลับมาที่ jQuery เพื่อแสดงผลลัพธ์ด้วยคำสั่ง console.log