Skip to main content

PHP ค้นหาข้อมูล ด้วย Jquery Ajax

การเขียนโปรแกรม ค้นหาข้อมูล ใน MySQL โดย ใช้ Jquery ajax ในการดึงข้อมูล และนำมาแสดงผล โดยไม่ต้อง Refresh หน้าจอ ช่วยเพิ่มความสะดวกรวดเร็วในการใช้งาน ของผู้ใช้งานได้ ในตัวอย่างจะเป็นการเขียนโปรแกรมดึงข้อมูล จากข้อมูลที่อยู่ในฐานข้อมูล  MySQL นำมาแสดงผล

ตัวอย่าง การเขียนโปรแกรม ค้นหาข้อมูล รายชื่อพนักงาน

หลักการทำงาน คือ เมื่อมีการ พิมพ์ข้อมูลลงใน TextInput  จะมีการดักจับ Event ของ Keyboard ด้วย  Javascript Function (onkeyup)
โดยจะเรียก Funciton ที่เราสร้างขึ้นมา ใช้ Ajax ส่งค่า Value ที่ได้ไป ที่ไฟล์ php เพื่อดึงข้อมูลจาก MySQL แล้วส่ง ค่ากลับมาแสดงผลโดยที่ไม่มีการ Refresh หน้าจอ

1.สร้างไฟล์ data.php
ในไฟล์ data.php เป็นการเชื่อมต่อฐานข้อมูล และจะมีการใช้คำสั่ง SQL ในการค้นหาข้อมูล จาก Table user โดยจะมีการรับค่า ตัวแปร POST  ที่รับค่ามาจาก Ajax  และ ใช้คำสั่ง LIKE ช่วยในการค้นหา

2.สร้างไฟล์ index.php

ในไฟล์ index.php เป็นส่วนในการแสดงผลให้กับผู้ใช้งาน โดยจะมีการสร้าง ช่องรับข้อมูล TextInput  กำหนดให้มีการ ดักจับ Event ของ Keyboard ด้วย Function onkeyup  เพื่อให้ผู้ใช้กรอกข้อมูล และ ส่งค่าที่ได้ไปที่ Function  search_user  โดยใช้ Ajax ส่งค่า value ไปที่ไฟล์ data.php  เมื่อได้ข้อมูลกลับมา ให้แสดงผลใน Tag ที่มี class ที่ชื่อว่า get_user