PHP開發(fā)基礎(chǔ)教學(xué)之AJAX與MySQL
AJAX 資料庫實(shí)例
AJAX可以用來和資料庫進(jìn)行互動(dòng)式通訊
在下面的範(fàn)例將示範(fàn)網(wǎng)頁如何透過AJAX 從資料庫讀取資訊
請?jiān)谧筮叺南吕鍐沃羞x擇一個(gè)客戶：
本例由四個(gè)元素組成：
?MySQL 資料庫
?簡單的HTML 表單
?JavaScript
?PHP頁面
資料庫
#本範(fàn)例需要在資料庫中建立如下資料表：
HTML 表單與JavaScript
源碼見1.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showUser(str){
var xmlhttp;
//檢查是否有用戶被選擇
if(str==""){
document.getElementById("txt").innerHTML="";
return;
}
//創(chuàng)建 XMLHttpRequest 對象
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else{
//IE6,IE5瀏覽器執(zhí)行代碼
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txt").innerHTML=xmlhttp.responseText;
}
}
//向服務(wù)器上的文件發(fā)送請求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<from>
<!-- onchange 事件會(huì)在域的內(nèi)容改變時(shí)觸發(fā)
當(dāng)用戶在上面的下拉列表中選擇某位用戶時(shí)，會(huì)執(zhí)行名為 "showUser()" 的函數(shù)
-->
<select name="users" onchange="showUser(this.value)">
<option value="">選擇一個(gè)人：</option>
<option value="1">Peter Griffin</option>
<option value="2">小 明</option>
<option value="3">小 白</option>
</select>
</from>
<br/>
<br/>
<div id="txt"><b>選擇相應(yīng)用戶，用戶信息將在這里展示出來</b></div>
</body>
</html>原始碼解釋
使用者透過下拉清單選擇後，透過onchange事件執(zhí)行showUser（）函數(shù)
showUser() 函數(shù)會(huì)執(zhí)行下列步驟：
?檢查是否有使用者被選擇
建立XMLHttpRequest 物件
?建立在伺服器回應(yīng)就緒時(shí)執(zhí)行的函數(shù)
?向伺服器上的檔案傳送請求
#請注意新增至URL 末端的參數(shù)（q）（包含下拉清單的內(nèi)容）
#PHP 頁面
上面這段透過JavaScript 呼叫的伺服器頁面是名為"2.php" 的PHP 檔案。
"2.php" 中的原始程式碼會(huì)執(zhí)行一次針對MySQL 資料庫的查詢，然後在HTML 表格中傳回結(jié)果：
<?php
header("Content-type: text/html; charset=utf-8");
$q=$_GET["q"];
//連接數(shù)據(jù)庫
$con = mysqli_connect('localhost','root','root','test');
//判斷是否連接成功
if(!$con){
die('連接數(shù)據(jù)庫失?。?#39;.mysqli_error($con));
}
//選擇數(shù)據(jù)庫
mysqli_select_db($con,"test");
//設(shè)定字符集
mysqli_query($con,'set names utf8');
//從數(shù)據(jù)庫中查出id對應(yīng)的相應(yīng)用戶信息
$sql="SELECT * FROM customer WHERE id='".$q."'";
$result=mysqli_query($con,$sql);
echo "<table border='1' cellspacing='0' cellpadding='0'>
<tr>
<th>姓</th>
<th>名</th>
<th>年齡</th>
<th>家鄉(xiāng)</th>
<th>工作</th>
</tr>
";
//循環(huán)顯示出用信息
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>";
?>學(xué)習(xí)心得
本範(fàn)例主要包含以下知識點(diǎn)：
?表單基礎(chǔ)：下拉選項(xiàng)
?onchange事件:在網(wǎng)域的內(nèi)容改變時(shí)發(fā)生
函數(shù)呼叫、函數(shù)傳值
AJAX XMLHttpRequest物件的建立、在伺服器回應(yīng)的時(shí)候執(zhí)行的函數(shù)、傳送請求到伺服器上的檔案：見1-5講學(xué)習(xí)心得
HTML DOM getElementById()方法：傳回?fù)碛兄付↖D 的第一個(gè)物件的引用
?資料庫的建立、連接資料庫、選擇資料庫、設(shè)定字元集、根據(jù)id從資料庫查詢、循環(huán)取出資料庫中的內(nèi)容
?有關(guān)資料庫的函數(shù)：
mysqli_connect():開啟一個(gè)到MySQL 伺服器的新的連線
mysqli_error():回傳上一個(gè)MySQL 操作產(chǎn)生的文字錯(cuò)誤訊息。
mysqli_select_db():用於變更連線的預(yù)設(shè)資料庫
mysqli_query():執(zhí)行某個(gè)針對資料庫的查詢
