ดังตัวอย่างจากกนี้ หรือการพัฒนาเว็บไซต์ โดยใช้ HTML PHP JAVASCRIPT JQuery Ajax มาใช้งานร่วมกัน ก็คือ การที่ต้องการทีจะค้นหาข้อมูลโดยส่งค่าที่กรอกจากหน้าของ html แล้วทำการส่งให้ JQuery เพื่อดึงข้อมูล แล้วส่งข้อมูลที่ได้ผ่าน JQuery ไปยัง php เพื่อค้นหา แล้วส่งผลลัพธ์กลับมาแสดงที่ JQuery อีกครั้ง
มีขั้นตอนดังนี้
1. ตัวอย่างโคดที่จะทำงานในส่วนของหน้าแสดง จะเป็นส่วนที่จะให้ผู้ใช้งานกรอกชื่อ หรือ เพื่อจะทำส่งผ่าน JQuery ไปค้นหาโดย php แล้วแสดงผลลัพธ์ออกมา
** กำหนดชื่อไฟล์ว่า test_php.html (จะใช้ชื่ออื่ก็ได้)
โค้ด: เลือกทั้งหมด
<html>
<head>
<title>Test php</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script> //เรียกใช้งาน library javascrit
</head>
<body>
<form action="" name="frmMain" id="frmMain" method="post"> //สร้าง form
<div>
<label for="fname">ค้นหาชื่อ</label>
<input type="text" name="txtName" id="txtName" placeholder="Your name..">
<br>
<input type="submit" value="Submit" name="btnSend" id="btnSend">
<!--<input type="button" name="btnSend" id="btnSend" value="Send">-->
</div>
</form>
</body>
</html>
โค้ด: เลือกทั้งหมด
<html>
<body>
--- ตัวอย่างโคดจาก ข้อ 1 ---
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSend").click(function () { //ตรวจสอบว่ามีการกดที่ปุ่มที่มี id ว่่า btnSend หรือไม
$.ajax({
type: "POST",
url: "test_php.php", //ไฟล์ที่ต้องการส่งค่าไป
data: $("#frmMain").serialize(),
success: function (result) {
alert(result.message); //ส่วนที่จะแสดงผลลัพธ์
}
});
});
});
</script>
3.ตัวอย๋างโคด ฝั่ง php ที่มีไว้สำหรับการรับค่า มาจาก Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูล แล้วจะผลลัพธ์กลับไปแสดงที่ JQuery
กำหนดชื่อไฟล์ว่า test_php.php (จะใช้ชื่ออื่ก็ได้)
โค้ด: เลือกทั้งหมด
<?php
header('Content-Type: application/json'); // เพื่อจะส่งค่าผลลัพธ์ที่ได้ กลับมาเป็น รูปแบบไฟล์ json
// เป็นส่วนสำหรับเชื่อมฐานข้มมูล
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "piecephpbb"; //ชื่อฐานข้อมูล
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$name = $_POST['txtName']; //รับค่า ชื่อ มาจาก Ajax
$sql = "SELECT * FROM tools_exchange_rate WHERE name = '".$name."'"; // SQL สำหรับค้นหา ชื่อ จากตาราง tools_exchange_rate
$query = mysqli_query($conn,$sql);
$i = 0; //กำหนดตัวแปร $i
while($result=mysqli_fetch_array($query,MYSQLI_ASSOC))
{
$i += 1; // ถ้าหากมีชื่อ ที่ส่งมาอยู่ใน ตาราง tools_exchange_rate $i จะมีค่าเป็น 1
}
if( $i != 0){ //ถ้าหาก $i มีค่าไม่เป็น 0 แสดงว่ามีชื่ออยู่ในตาราง tools_exchange_rate
echo json_encode(array('status' => '1', 'message' => 'มีชื่อนี้อยู่')); //ส่งค่ารูปแบบ json กลับไปหา jquery
} else {
echo json_encode(array('status' => '0', 'message' => 'ไม่มีชื่อนี้อยู่')); //ส่งค่ารูปแบบ json กลับไปหา jquery
}
$conn->close();
?>
ตัวอย่างฐานข้อมูลที่นำมาทดสอบ
ผลลัพธ์ที่ได้ กรณ๊มีชื่ออยู่ตารางฐานข้อมูล
ผลลัพธ์ที่ได้ กรณ๊ไม่มีชื่ออยู่ตารางฐานข้อมูล
บทความศึกษาเพิ่มเติม
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox
ทำเอฟเฟค ตอนกดปุ่ม
คำสั่งจัดการฐานข้อมูล MySQL