บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค AJAX ในการทำงาน และใช้ป้อปอัพ modal ของ bootstrap4 สร้างความน่าสนใจมากขึ้น โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที
- search modal2.jpg (18.46 KiB) Viewed 5054 times
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
ค้นหาบางอย่าง
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Search Somrthing..by Mindphp</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" class="form-control" id="search" placeholder="ค้นหาอะไรดี">
<hr>
<div id="display"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html> โค้ด: เลือกทั้งหมด
$(document).ready(function() {
$("#search").keyup(function() {
var text = $('#search').val();
if(text==""){
$("#display").html(" ");
}else{
$.ajax({
type: "POST",
url: "search.php",
data: {search: text},
success: function(response) {
$("#display").html(response);
},
error: function () {
$("#display").html("something wrong with ajax...!!");
}
});
}
});
}); โค้ด: เลือกทั้งหมด
<?php
//ส่วนของการติดต่อฐานข้อมูล
$host = "localhost";
$user = "root";
$password = "";
$dbname = "mydb";
// open the connection
$conn = new mysqli($host, $user, $password, $dbname);
mysqli_set_charset($conn, "utf8");
// Check connection
if ($conn->connect_errno) {
echo "Failed to connect to MySQL: (" . $conn ->connect_errno . ") " . $conn ->connect_error;
}
?>- mydb.jpg (4.09 KiB) Viewed 5054 times
เมื่อไฟล์ search.php ดึงข้อมูลมาเรียบร้อยแล้วจะส่งค่าข้อมูลกลับไปให้กับไฟล์ index.php โดยใช้ $.ajax
โค้ด: เลือกทั้งหมด
<?php
include 'connect.php';
$search_item = $_POST['search'];
$query = "select * from mindphp where program like '%".$search_item."%'";
$result = mysqli_query($conn, $query) or die("Query failed");
$output = '';
if(mysqli_num_rows($result) > 0){
$output .= '<ol>';
while($row = mysqli_fetch_array($result)){
$output .= '<li>'.$row["program"].'</li>';
}
$output .= '</ol>';
}else{
$output .= '<p>ไม่พบข้อมูล</p>';
}
echo $output;
?>- btn modal.jpg (5.34 KiB) Viewed 5054 times
- modal.jpg (18.34 KiB) Viewed 5054 times
- search modal.jpg (20.92 KiB) Viewed 5054 times
หวังว่าผู้อ่านจะเข้าใจและนำไปประยุกต์เพิ่มเติมต่อให้เข้ากับโปรเจ็คได้ครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery/Ajax
-แลกเปลี่ยนความรู้ jQuery/Ajax
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP