Skip to main content

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

monkeywebstudio PHP

การเขียนโปรแกรม ค้นหาข้อมูล ใน 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 ช่วยในการค้นหา

<?php
       //ตรวจสอบว่ามีการส่งค่าตัวแปร $_POST['value'] หรือไม่
	if(!isset($_POST['value'])){
		exit();
	}
	//ตั้งค่าการเชื่อมต่อฐานข้อมูล
	$database_host 			= 'localhost';
	$database_username 		= 'root';
	$database_password 		= '';
	$database_name 			= 'demo';

	$mysqli = new mysqli($database_host, $database_username, $database_password, $database_name);
//กำหนด charset ให้เป็น utf8 เพื่อรองรับภาษาไทย
	$mysqli->set_charset("utf8");

//กรณีมี Error เกิดขึ้น
	if ($mysqli->connect_error) {
		die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
	}
	
	//MySqli Select Query
	$value = '%'.$_POST['value'].'%';
	$results = $mysqli->prepare("SELECT id,name FROM user WHERE name LIKE ? ");
	$results->bind_param("s",$value);
	$results->execute();
	$results->bind_result($id,$name);
	
	while($results->fetch()){
		echo"<tr>";
			echo "<td>".$id."</td>";
			echo "<td>".$name."</td";
		echo"</tr>";
	}
?>

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

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

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title></title>
 
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script>
		function search_user(value){
	
				$.ajax({
					type:"POST",
					url:"data.php",
					data:{value:value},
					success:function(data){
						$(".get_user").html(data);
					}
				});

			return false;
		}
	</script>
  </head>
  <body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h4>ตัวอย่าง การเขียนโปรแกรม ค้นหารายชือ พนักงาน</h4>
				<input type="text" class="form-control"  name="search_user" onkeyup="return search_user(this.value);">
				
				<table class="table ">
					<thead>
						<tr>
							<th width="10%">ID</th>
							<th width="90%">NAME</th>
						</tr>
					</thead>
					<tbody class="get_user">
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
  
  </body>
</html>