ในเนื้อหาส่วนนี้เป็นการสร้างตัวอย่างของการนำเทคนิค AJAX ไปใช้ในการดึงข้อมูลจากฐานข้อมูลมาแสดงผล ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 1
1.ไฟล์ showdata.php
<html> <head> <script> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("txtHint").innerHTML=this.responseText; } } xmlhttp.open("GET","getdata.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Pawin Khenphukhiaw</option> <option value="2">Kawin KPW</option> <option value="3">Sawin KPW</option> <option value="4">Warin KPW</option> </select> </form> <br> <div id="txtHint"><b>แสดงข้อมูล....</b></div> </body> </html>
ไฟล์ที่ 1 showdata,php
จากไฟล์ที่ 1 ฟังก์ชัน showUser() จะถูกเรียกใช้งานเมื่อค่าของอินพุตเปลี่ยนแปลงไปจากเดิม โดยใช้คียเวิร์ด onchange โดยฟังก์ชัน showUser() จะส่ง XMLHttpRequest ไปยังไฟล์ getdata.php ด้วยพารามิเตอร์ที่ชื่อว่า q
- onchange เหตุการณ์เมื่อค่าปัจจุบันเปลี่ยนเป็นค่าใหม่
2.ไฟล์ getdata.php
<html> <head> </head> <body> <?php $q = intval($_GET['q']); $con = mysqli_connect('localhost','username','password','database_name'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </body> </html>
ไฟล์ที่ 2 getdata.php
ไฟล์ที่ 2 รับพารามิเตอร์ที่ส่งมาผ่านทาง URL แล้วนำไป query ข้อมูล จากนั้ันส่งผลลัพธ์ทั้งหมดกลับไปอัพเดทหน้า showdata.php โดยไม่โหลดหน้าใหม่
ตารางฐานข้อมูลสมมติ
id | FirstName | LastName | Age | Hometown | Job |
---|---|---|---|---|---|
1 | Pawin | Khenphukhiaw | 23 | Kasetsomboon | artist |
2 | Kawin | KPW | 40 | Chaiyaphum | Teacher |
3 | Sawin | KPW | 39 | Chaiyaphum | Farmer |
4 | Warin | KPW | 41 | Chaiyaphum | Nurse |