การส่งข้อมูล จาก jQuery ไปยัง PHP
jQuery เป็น Javascript Library ที่ช่วยให้การใช้งาน Javascript สะดวก รวดเร็วขึ้น เช่น ตัดปัญหาเรื่อง Browser ว่าจะใช้ได้หรือไม่ และอื่น ๆ อีกมากมาย และที่สำคัญ ในตัวอย่างนี้ จะเป็นการใช้ jQuery เพื่อส่งข้อมูลไปยัง PHP เพื่อเก็บลงฐานข้อมูลต่อไป แต่ในตัวอย่างนี้ จะเป็นการส่งข้อมูลไปยัง PHP และให้ PHP ส่งกลับมาที่ JQuery และแสดงผ่านหน้าจอ Popup ของ JQuery
การใช้งานตามตัวอย่างนี้ จำเป็นที่ต้องทำเครื่องคอมให้เป็น Server หรือถ้าใครมี Server ที่ใช้งานได้ เช่นเดียวกัน โดยสร้างห้องบน Server และบันทึกไฟล์ต่าง ๆ ให้อยู่ในห้องเดียวกัน เพื่อความสะดวก จะได้ไม่ต้องอ้างอิงยืดยาว
ในตัวอย่างนี้ ใช้ XAMPP เพื่อจำลองเครื่อง Notebook ให้เป็น Server
ไฟล์ที่จะใช้งาน มี 3 ไฟล์ คือ
ก่อนอื่น ต้องไปดาวน์โหลด jQuery มาก่อน ที่ http://www.jquery.com
การดาวน์โหลด ให้ใช้รุ่น Production จะดีกว่า แต่ถ้าต้องการดูคำอธิบายในโค้ด ก็เลือก รุ่น Development ก็ได้
ไฟล์ index.html สำหรับสร้างฟอร์ม และส่งข้อมูล พร้อมทั้งรับข้อมูลที่ส่งมาจาก PHP มีโค้ด ดังนี้
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>AJAX: POST</title>
</head>
<body>
<h2>ตัวอย่างการส่งข้อมูล จาก jQuery ไปยัง PHP</h2>
<form action="#">
ชื่อของท่าน <INPUT TYPE="TEXT" NAME="user_name" SIZE="40" maxlength="45">
<p><button type="submit">ส่งข้อมูล</button></p>
</form>
<script src="jquery-2.1.1.min.js"></script>
<script>
// listen for click
$('form').on('submit', function(e) {
$.post( 'welcome.php', $(this).serialize(), function(data) {
alert( data);
});
// disable default action
e.preventDefault();
});
</script>
</body>
</html>
การใช้งาน jquery ต้องอ้างอิงถึงเสียก่อน คือ <script src="jquery-2.1.1.min.js"></script>
จากนั้น จึงรอรับการคลิก ส่งข้อมูลจากปุ่มส่งข้อมูล ที่ชื่อ submit เมื่อคลิก แล้ว จึงใช้คำสั่ง post เพื่อส่งข้อมูล ดังนี้
$.post( 'welcome.php', $(this).serialize(), function(data) {
เมื่อพิมพ์ชื่อ และกดปุ่มส่งข้อมูล จะเรียกใช้งาน welcome.php และส่งกลับ พร้อมทั้งแสดงผ่าน popup ดังนี้
ถ้าสามารถส่งข้อมูล จาก html โดยใช้ jQuery ไปยัง PHP ได้ ก็สามารถจัดการกับข้อมูลได้ อย่างไรก็ได้ ตามต้องการ
จะเห็นว่า การทำงานของ PHP อยู่เบื้องหลัง และไม่มีการเปลี่ยนหน้าเว็บเหมือนสมัยก่อน
การใช้งานตามตัวอย่างนี้ จำเป็นที่ต้องทำเครื่องคอมให้เป็น Server หรือถ้าใครมี Server ที่ใช้งานได้ เช่นเดียวกัน โดยสร้างห้องบน Server และบันทึกไฟล์ต่าง ๆ ให้อยู่ในห้องเดียวกัน เพื่อความสะดวก จะได้ไม่ต้องอ้างอิงยืดยาว
ในตัวอย่างนี้ ใช้ XAMPP เพื่อจำลองเครื่อง Notebook ให้เป็น Server
ไฟล์ที่จะใช้งาน มี 3 ไฟล์ คือ
- index.html คือไฟล์หลัก ใช้เป็นแบบฟอร์มกรอกข้อมูล เพื่อส่งข้อมูลผ่าน jQuery ไปยัง PHP
- jquery-2.2.2.min.js คือไฟล์ jquery ที่ดาวน์โหลดมา เพื่อใช้งาน
- welcome.php คือไฟล์ PHP สำหรับรับข้อมูล และส่งกลับ
ไฟล์ทั้งหมด อยู่ในห้องเดียวกันบน Server
ก่อนอื่น ต้องไปดาวน์โหลด jQuery มาก่อน ที่ http://www.jquery.com
การดาวน์โหลด ให้ใช้รุ่น Production จะดีกว่า แต่ถ้าต้องการดูคำอธิบายในโค้ด ก็เลือก รุ่น Development ก็ได้
ไฟล์ index.html สำหรับสร้างฟอร์ม และส่งข้อมูล พร้อมทั้งรับข้อมูลที่ส่งมาจาก PHP มีโค้ด ดังนี้
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>AJAX: POST</title>
</head>
<body>
<h2>ตัวอย่างการส่งข้อมูล จาก jQuery ไปยัง PHP</h2>
<form action="#">
ชื่อของท่าน <INPUT TYPE="TEXT" NAME="user_name" SIZE="40" maxlength="45">
<p><button type="submit">ส่งข้อมูล</button></p>
</form>
<script src="jquery-2.1.1.min.js"></script>
<script>
// listen for click
$('form').on('submit', function(e) {
$.post( 'welcome.php', $(this).serialize(), function(data) {
alert( data);
});
// disable default action
e.preventDefault();
});
</script>
</body>
</html>
การใช้งาน jquery ต้องอ้างอิงถึงเสียก่อน คือ <script src="jquery-2.1.1.min.js"></script>
จากนั้น จึงรอรับการคลิก ส่งข้อมูลจากปุ่มส่งข้อมูล ที่ชื่อ submit เมื่อคลิก แล้ว จึงใช้คำสั่ง post เพื่อส่งข้อมูล ดังนี้
$.post( 'welcome.php', $(this).serialize(), function(data) {
- $.post() ตัวอักษร $ เป็น shortcut สำหรับเรียกใช้ jquery ส่วนหลังจุดเป็น method ที่เรียกใช้งาน ถ้าจะส่งแบบ get ก็ได้ เป็น $.get()
- welcome.php คือไฟล์ที่จะรับข้อมูลไปดำเนินการ รับข้อมูลโดยใช้ $_POST หรือ $_GET แล้วแต่ว่า จะส่งมาอย่างไร
- $(this).serialize() คำว่า this เป็น Object หมายถึงแบบฟอร์มนี้ ส่วน serialize() เป็นคำสั่งที่ให้เอาข้อมูลในแบบฟอร์มทั้งหมด มาจัดทำเป็น key-value เพื่อส่งออก
- function(data) {} เป็นการรับข้อมูลเข้ามาเพื่อดำเนินการ ในตัวอย่างนี้ เอามาแสดงเป็น popup ด้วยคำสั่ง alert()
ไฟล์ PHP มีดังนี้ (welcome.php)
<?php
$content = trim($_POST["user_name"]);
echo "สวัสดีครับ คุณ" . $content. " จาก PHP";
?>
การส่งออกของ PHP ไปยัง jQuery คือใช้การ echo
ตัวอย่างหน้าจอ
แสดงแบบฟอร์มจากไฟล์ index.html
ถ้าสามารถส่งข้อมูล จาก html โดยใช้ jQuery ไปยัง PHP ได้ ก็สามารถจัดการกับข้อมูลได้ อย่างไรก็ได้ ตามต้องการ
จะเห็นว่า การทำงานของ PHP อยู่เบื้องหลัง และไม่มีการเปลี่ยนหน้าเว็บเหมือนสมัยก่อน
ความคิดเห็น
แสดงความคิดเห็น