JavaScript ส่งค่า GET ให้ PHP ด้วย JQuery

สอนเขียนภาษา JavaScript ส่งค่า GET ให้ PHP ด้วย JQuery โดยใช้คำสั่ง ajax รูปแบบการสื่อสารแบบ get โดยจะมีการแนบค่าตัวแปรไปกับ URL ปลายทางของ PHP ในรูปแบบของ QueryString สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ส่งค่า GET ให้ PHP ด้วย JQuery

<input type="text" id="fullname" placeholder="กรุณากรอกชื่อ">
<input type="button" value="ส่งค่า GET" id="btn">

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

<?php
    // demo.php
    isset( $_GET['fullname'] ) ? $fullname= $_GET['fullname'] : $fullname= "";
    $json = array( "fullname"=>"ค่าตัวแปร fullname ส่งกลับมาจาก Server แบบ GET คือ ".$fullname );
    echo json_encode( $json );    
?>

ผลลัพธ์

ค่าตัวแปร fullname ส่งกลับมาจาก Server แบบ GET คือ Hello, World

1. JavaScript ส่งค่า GET ให้ PHP ด้วย JQuery เมื่อผู้ใช้งานกดคลิกปุ่มจะเข้าไปทำงานที่ function click ของ id=btn

2. เก็บค่าช่อง TextBox ไว้ที่ตัวแปร fullname จากนั้นใช้คำสั่ง ajax การสื่อสารแบบ get ส่งไปที่ไฟล์ demo.php โดยแนบตัวแปร fullname ไปกับ URL

3. ที่ไฟล์ PHP รับค่าตัวแปร fullname ด้วยคำสั่ง $_GET และส่งค่ากลับในรูปแบบ json ด้วยคำสั่ง json_encode

4. success:function(data) จะทำงานเมื่อส่งค่าจาก JavaScript ไป PHP สำเร็จ โดยตัวอย่างพิมพ์ค่าตัวแปร fullname ที่ส่งกลับมาจาก PHP ด้วยคำสั่ง console.log