隨著網路和行動應用程式的發展,動態頁面和即時查詢資料的需求越來越高。 AJAX (Asynchronous JavaScript and XML) 正是一個幫助開發者實現非同步資料傳輸和動態頁面更新的技術。本文將介紹如何使用AJAX和PHP從資料庫查詢數據,並在前端呈現。
首先,我們需要建立一個簡單的資料庫,用於儲存資料。這裡我們以“students”表為例,包含“id”,“name”和“age”三個字段,儲存學生的基本資訊。
建立好資料庫後,我們需要使用PHP連接資料庫,並且寫查詢語句。以下是一個簡單的查詢操作程式碼:
<?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } $sql = "SELECT * FROM students"; $result = $conn->query($sql); // 处理查询结果 if ($result->num_rows > 0) { // 输出每行数据 while($row = $result->fetch_assoc()) { echo "学生ID: " . $row["id"]. " - 姓名: " . $row["name"]. " - 年龄: " . $row["age"]. "<br>"; } } else { echo "0 结果"; } $conn->close(); ?>
上述程式碼使用了mysqli連接MySQL資料庫,並執行了一個簡單的查詢操作,將查詢結果輸出到了前端頁面。在實際開發中,可能需要自訂要查詢的內容,以及過濾和排序等操作。
接下來,我們需要使用AJAX技術來非同步請求伺服器端數據,並將結果呈現在前端頁面上。以下是一個簡單的AJAX查詢操作的程式碼:
<html> <head> <script> function showData(str) { if (str=="") { document.getElementById("result").innerHTML=""; return; } var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("result").innerHTML=this.responseText; } } xmlhttp.open("GET","getdata.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <select name="students" onchange="showData(this.value)"> <option value="">请选择一个学生:</option> <option value="1">小明</option> <option value="2">小红</option> <option value="3">小刚</option> </select> </form> <br> <div id="result"><b>这里会显示查询到的学生信息</b></div> </body> </html>
上述程式碼首先定義了一個showData函數,用於發送非同步請求並接受伺服器端傳回的資料。在選擇方塊中選擇一個學生後,呼叫showData函數,並將所選學生的ID作為參數傳入。
AJAX請求使用了XMLHttpRequest對象,透過open方法指定GET請求的URL位址和參數,並透過send方法發送請求。當請求傳回200狀態碼時,說明查詢成功,呼叫onreadystatechange函數,並將伺服器端傳回的資料作為responseText屬性的值,將資料顯示在前端頁面上。如果請求失敗,可以透過status屬性取得失敗狀態碼和錯誤訊息。
最後,我們需要編寫一個用於接受查詢請求並從資料庫查詢資料的PHP腳本。以下是一個簡單的PHP腳本的程式碼:
<?php $q = $_GET['q']; $con = mysqli_connect('localhost','username','password','myDB'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"students"); $sql="SELECT * FROM students WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['id'] . "</td>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['age'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?>
上述程式碼先讀取AJAX請求中傳來的參數,然後連接到MySQL資料庫,執行一個有where條件的查詢語句,將查詢結果以HTML表格的形式傳回前端頁面。
綜上,AJAX和PHP相結合查詢資料庫資料並在前端呈現是一個常見的動態網頁開發需求,透過合理的使用這些技術,我們可以快速地實現一個完整的動態頁面。
以上是ajax php怎麼查詢資料庫數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!