Devdit
 

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

3.6K

สอนเขียนภาษา 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

แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ