ข้ามไปที่เนื้อหาหลัก

การส่งข้อมูล จาก jQuery ไปยัง PHP

jQuery เป็น Javascript Library ที่ช่วยให้การใช้งาน Javascript สะดวก รวดเร็วขึ้น เช่น ตัดปัญหาเรื่อง Browser ว่าจะใช้ได้หรือไม่ และอื่น ๆ อีกมากมาย และที่สำคัญ ในตัวอย่างนี้ จะเป็นการใช้ jQuery เพื่อส่งข้อมูลไปยัง PHP เพื่อเก็บลงฐานข้อมูลต่อไป แต่ในตัวอย่างนี้ จะเป็นการส่งข้อมูลไปยัง PHP และให้ PHP ส่งกลับมาที่ JQuery  และแสดงผ่านหน้าจอ Popup ของ JQuery

การใช้งานตามตัวอย่างนี้ จำเป็นที่ต้องทำเครื่องคอมให้เป็น Server หรือถ้าใครมี Server ที่ใช้งานได้ เช่นเดียวกัน โดยสร้างห้องบน Server และบันทึกไฟล์ต่าง ๆ ให้อยู่ในห้องเดียวกัน เพื่อความสะดวก จะได้ไม่ต้องอ้างอิงยืดยาว

ในตัวอย่างนี้ ใช้ XAMPP เพื่อจำลองเครื่อง Notebook ให้เป็น Server

ไฟล์ที่จะใช้งาน มี 3 ไฟล์ คือ

  1. index.html คือไฟล์หลัก ใช้เป็นแบบฟอร์มกรอกข้อมูล เพื่อส่งข้อมูลผ่าน jQuery ไปยัง PHP
  2. jquery-2.2.2.min.js คือไฟล์ jquery ที่ดาวน์โหลดมา เพื่อใช้งาน
  3. 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

เมื่อพิมพ์ชื่อ และกดปุ่มส่งข้อมูล จะเรียกใช้งาน welcome.php และส่งกลับ พร้อมทั้งแสดงผ่าน popup ดังนี้

ถ้าสามารถส่งข้อมูล จาก html โดยใช้ jQuery ไปยัง PHP ได้ ก็สามารถจัดการกับข้อมูลได้ อย่างไรก็ได้ ตามต้องการ
จะเห็นว่า การทำงานของ PHP อยู่เบื้องหลัง และไม่มีการเปลี่ยนหน้าเว็บเหมือนสมัยก่อน



ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

อุปมา อุปไมย สำนวนการเปรียบเทียบ ของไทย

การเตรียมสอบ ก.พ. ภาค ก. เพื่อสอบบรรจุเข้ารับราชการ มีการทดสอบความสามารถทั่วไป มักจะมี
ข้อสอบที่เกี่ยวกับอุปมาอุปไมย  ข้อสอบมีลักษณะ ให้หาตัวเลือกที่มีความหมาย ความสัมพันธ์คล้ายคลึง หรือเหมือนกับที่โจทย์กำหนดให้มา  หรือเติมข้อความที่มีความหมายสอดคล้องกับคำอุปมาอุปไมยที่ยกมาให้ เป็นต้น ดังนั้น การเข้าใจความหมายของคำอุปมาอุปไมย จึงช่วยให้ทำข้อสอบได้ดียิ่งขึ้น

คำอุปมาอุปไมย หมายถึง ถ้อยคำที่เป็นสำนวนพวกหนึ่ง กล่าวทำนองเปรียบเทียบ ให้เห็นจริง เข้าใจแจ่มแจ้งชัดเจน และสละสลวยน่าฟังมากขึ้น การพูดหรือการเขียน นิยมหาคำอุปมาอุปไมยมาเติมให้ได้ความชัดเจนเกิดภาพพจน์ เข้าใจง่าย เช่น

คนดุ หากต้องการให้ความหมายชัดเจน น่าฟัง และเกิดภาพพจน์ชัดเจนก็ต้องอุปมาอุปไมยว่า “ดุ เหมือน เสือ”
ขรุขระมาก การสื่อความยังไม่ชัดเจนไม่เห็นภาพ ต้องอุปมาอุปไมยว่า “ขรุขระเหมือนผิวมะกรูด” หรือ “ขรุขระเหมือนผิวพระจันทร์” ก็จะทำให้เข้าใจ ความหมายในรูปธรรมชัดเจนมากยิ่งขึ้น

คำอุปมาอุปไมยที่ควรรู้จัก (พิมพ์คำ/ข้อความ แล้วกดปุ่ม "ค้นหา")

แนวข้อสอบ เงื่อนไขสัญลักษณ์

ครั้งที่แล้ว ได้แนะนำหลักการทำ ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ มา แล้ว ถ้าใครยังไม่ได้อ่าน ก็คลิกกลับไปอ่านได้
ความจริง ข้อสอบเงื่อนไขสัญลักษณ์ เป็นข้อสอบไม่ยาก ถ้าเข้าใจหลักการ และมีทักษะความชำนาญ ใจเย็น ๆ อย่าตื่นเต้น โดยเฉพาะการดูเครื่องหมายต่าง ๆ อย่าดูผิด เช่น เครื่องหมายมากกว่า (>) น้อยกว่า (<) เป็นต้น เพราะการแก้ปัญหาโจทย์เงื่อนไขสัญลักษณ์ หรือ inequality ก็คล้ายกับการแก้ปัญหาสมการโดยทั่วไป นั่นเอง คือ สามารถบวก ลบ คูณ หาร ด้วยจำนวนที่เท่ากัน ทั้งสองข้างของเครื่องหมายได้ กลับเศษเป็นส่วนได้ แต่ก็มีบางเรื่อง บางรายละเอียดที่แตกต่างกันบ้าง ซึ่งอ่านได้จาก ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ นะครับ ครั้งนี้ จึงเป็นการนำแนวข้อสอบ เงื่อนไขสัญลักษณ์ เพื่อนำมาฝึกทำให้เกิดทักษะความชำนาญ เพื่อจะได้ทำข้อสอบได้รวดเร็วขึ้น เพราะในห้องสอบ เวลาจัดได้ว่ามีค่ามาก ยิ่งทำเร็วและถูกต้อง ยิ่งดี คำสั่ง

เลือกตอบข้อ 1. ถ้าข้อสรุปทั้งสอง ถูกด้องหรือเป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 2. ถ้าข้อสรุปทั้งลอง ผิดหรือไม่เป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 3. ถ้าข้อ…

เทคนิคการทำ ข้อสอบ อนุกรม ของ ก.พ.

|ประเภทของอนุกรม เทคนิคการทำโจทย์เลข อนุกรม ข้อแนะนำเพิ่มเติม |


ข้อสอบเลขอนุกรม ของ ก.พ. ต้องการวัดความถนัดทางด้านตัวเลข โดยการจัดทำตัวเลขเป็นชุด ๆ ที่มีความสัมพันธ์กันบางอย่าง โดยให้ผู้เข้าสอบได้แสดงความถนัดด้านตัวเลข ในการวิเคราะห์และแก้ปัญหาตามที่โจทย์ระบุ


ประเภทของอนุกรม รูปแบบความสัมพันธ์ของตัวเลขอนุกรมเท่าที่พบบ่อย ๆ มีหลายประเภท เช่น

ก. อนุกรมเชิงเดี่ยว 

ได้แก่ชุดตัวเลขที่เป็นอนุกรมเพียงชุดเดียว เช่น
ค่าของตัวเลขเพิ่มขึ้นต่อเนื่องอย่างเป็นระบบ โดยการบวก หรือ คูณ ตัวเลขก่อนหน้า เช่น บวกด้วยตัวเลขที่เป็นค่าคงที่ เช่น    5   10   15   20   ...?...
บวกด้วยตัวเลขที่มีระบบ เช่น     1    2    5    10   ...?...
คูณด้วยค่าคงที่ เช่น   1   3   9   27   ...?...
มีทั้ง บวก ลบ คูณ หรือหาร สลับกัน เช่น บวกแล้วคูณด้วยค่าคงที่สลับกัน ดังตัวอย่าง  5   7    14   16  32   ...... มีการ บวก ลบ คูณ หรือ หาร ร่วมกัน เช่น  15   31   63   127   255  ...?...
ในตัวอย่างนี้ จะเห็นว่า ตัวเลขตัวแรกคูณด้วย 2 และบวกด้วย 1 จะได้ตัวเลขตัวถัดไป คูณด้วยค่าคงที่ที่เป็นเศษส่วน ให้สังเกตความสัมพันธ์ว่า ตัวเลขก่อนหน้า …