jQuery ส่งข้อมูลไป PHP ด้วยคำสั่ง AJAX

สอนเขียน jQuery ส่งข้อมูลไป PHP ด้วยคำสั่ง AJAX บทความนี้แนะนำวิธีการเขียนการส่งค่าจาก JavaScript ด้วย jQuery Framework ไปหาภาษา PHP ทั้งแบบ POST และแบบ GET สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ฟอร์มภาษา HTML

<input type="text" id="value" placeholder="กรุณากรอกข้อมูล">
<input type="button" value="ส่งค่าไป PHP" id="btn">

เมื่อผู้ใช้งานกดคลิกที่ปุ่ม id=btn โปรแกรมจะวิ่งเข้าไปทำงานในโค้ดของ jQuery ด้านล่างทั้งแบบตัวอย่างที่ 1 และตัวอย่างที่ 2 ขึ้นอยู่กับว่าต้องการส่งข้อมูลให้กับภาษา PHP แบบ POST หรือ GET โดยมีรายละเอียดดังนี้

ตัวอย่างที่ 1 jQuery ส่งข้อมูลไป PHP แบบ POST

<script>
    $("#btn").click(function(){
        let value = $("#value").val();
        $.ajax({
            type: "POST",
            dataType: "json",
            data: { value: value },
            url: "demo.php",
            success:function(data) {
                console.log( data['value'] );
            }
        });       
    });
</script>

<?php
    // demo.php
    isset( $_POST['value'] ) ? $value= $_POST['value'] : $value= "";
    $json = array( "value"=>$value );
    echo json_encode( $json );    
?>

ตัวอย่างที่ 2 jQuery ส่งข้อมูลไป PHP แบบ GET

<script>
    $("#btn").click(function(){
        let value = $("#value").val();
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "demo.php?value="+value,
            success:function(data) {
                console.log( data['value'] );
            }
        });       
    });
</script>

<?php
    // demo.php
    isset( $_GET['value'] ) ? $value= $_GET['value'] : $value= "";
    $json = array( "value"=>$value );
    echo json_encode( $json );    
?>

jQuery ส่งข้อมูลไป PHP ด้วยคำสั่ง AJAX ตัวอย่างที่ 1 เป็นแบบ POST มีการกำหนด type: "POST" และส่งข้อมูลผ่านคำสั่ง data ของ AJAX ส่วนฝั่ง PHP รับค่าตัวแปรด้วยคำสั่ง $_POST ส่วนตัวอย่างที่ 2 เป็นแบบ GET มีการกำหนด type: "GET" และส่งค่าตัวแปรแบบแนบไปกับ URL หรือ QueryString ส่วนฝั่ง PHP รับค่าตัวแปรด้วยคำสั่ง $_GET