JavaScript ส่งค่า POST ด้วย AJAX ของ jQuery

สอนเขียนภาษา JavaScript ส่งค่า POST ด้วย AJAX ของ jQuery Framework บทความนี้แนะนำการส่งค่าแบบ POST ผ่านภาษา JavaScript ด้วยการใช้ jQuery โดยจะส่งค่าให้กับภาษา PHP และส่งค่ากลับมาแสดงผลที่หน้าเว็บไซต์ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ส่งค่า POST ด้วย AJAX ของ jQuery

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

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

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

ผลลัพธ์

ค่าตัวแปร name ส่งกลับมาจาก Server แบบ POST คือ Devdit

1. กำหนดค่า id=name ให้กับ TextBox และ id=btn ให้กับ Button ของภาษา HTML เมื่อผู้ใช้งานกดคลิกปุ่มจะเข้าไปทำงานที่ $("#btn").click

2. ดึงค่าในช่อง id=name เก็บไว้ที่ตัวแปร name จากนั้นใช้คำสั่ง $.ajax กำหนดรูปแบบการส่งแบบ post พร้อมตัวแปร name ไปที่ไฟล์ hello.php

3. ที่ไฟล์ PHP รับค่าตัวแปร name เพื่อนำมาใช้งานต่อ และส่งค่ากลับไปที่ JavaScript ในรูปแบบ json ด้วยคำสั่ง json_encode 

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