PHP 和 AJAX MySQL 數(shù)據(jù)庫(kù)實(shí)例
AJAX 可用來與數(shù)據(jù)庫(kù)進(jìn)行交互式通信。
AJAX 數(shù)據(jù)庫(kù)實(shí)例
在下面的 AJAX 實(shí)例中，我們將演示網(wǎng)頁(yè)如何使用 AJAX 技術(shù)從 MySQL 數(shù)據(jù)庫(kù)中讀取信息。
在下拉列表中選擇一個(gè)名字 （測(cè)試說明：該實(shí)例功能未實(shí)現(xiàn)）
此列由四個(gè)元素組成：
- MySQL 數(shù)據(jù)庫(kù)
- 簡(jiǎn)單的 HTML 表單
- JavaScript
- PHP 頁(yè)面
數(shù)據(jù)庫(kù)
將在本例中使用的數(shù)據(jù)庫(kù)看起來類似這樣：
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | Brewery |
| 2 | Lois | Griffin | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Police Officer |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
HTML 表單
上面的例子包含了一個(gè)簡(jiǎn)單的 HTML 表單，以及指向 JavaScript 的鏈接：
<html> <head> <script src="selectuser.js"></script> </head> <body> <form> Select a User: <select name="users" onchange="showUser(this.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <p> <div id="txtHint"><b>User info will be listed here.</b></div> </p> </body> </html>
例子解釋 - HTML 表單
正如您看到的，它僅僅是一個(gè)簡(jiǎn)單的 HTML 表單，其中帶有名為 "users" 的下拉列表，這個(gè)列表包含了姓名，以及與數(shù)據(jù)庫(kù)的 "id" 對(duì)應(yīng)的選項(xiàng)值。
表單下面的段落包含了名為 "txtHint" 的 div。這個(gè) div 用作從 web 服務(wù)器檢索到的信息的占位符。
當(dāng)用戶選擇數(shù)據(jù)時(shí)，執(zhí)行名為 "showUser()" 的函數(shù)。該函數(shù)的執(zhí)行由 "onchange" 事件觸發(fā)。
換句話說：每當(dāng)用戶改變下拉列表中的值，就會(huì)調(diào)用 showUser() 函數(shù)。
JavaScript
這是存儲(chǔ)在 "selectuser.js" 文件中的 JavaScript 代碼：
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
例子解釋：
stateChanged() 和 GetXmlHttpObject 函數(shù)與 PHP AJAX 請(qǐng)求 那一節(jié)中的相同，您可以參閱其中的相關(guān)解釋。
showUser() 函數(shù)
假如下拉列表中的項(xiàng)目被選擇，函數(shù)執(zhí)行：
- 調(diào)用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對(duì)象
- 定義發(fā)送到服務(wù)器的 URL（文件名）
- 向 URL 添加帶有下拉列表內(nèi)容的參數(shù) (q)
- 添加一個(gè)隨機(jī)數(shù)，以防服務(wù)器使用緩存的文件
- 當(dāng)觸發(fā)事件時(shí)調(diào)用 stateChanged
- 通過給定的 URL 打開 XMLHTTP 對(duì)象
- 向服務(wù)器發(fā)送 HTTP 請(qǐng)求
PHP 頁(yè)面
由 JavaScript 調(diào)用的服務(wù)器頁(yè)面，是名為 "getuser.php" 的簡(jiǎn)單 PHP 文件。
該頁(yè)面用 PHP 編寫，并使用 MySQL 數(shù)據(jù)庫(kù)。
其中的代碼執(zhí)行針對(duì)數(shù)據(jù)庫(kù)的 SQL 查詢，并以 HTML 表格返回結(jié)果：
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_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>";
mysql_close($con);
?>
例子解釋：
當(dāng)查詢從 JavaScript 被發(fā)送到這個(gè) PHP 頁(yè)面，會(huì)發(fā)生：
- PHP 打開到達(dá) MySQL 服務(wù)器的連接
- 找到擁有指定姓名的 "user"
- 創(chuàng)建表格，插入數(shù)據(jù)，然后將其發(fā)送到 "txtHint" 占位符