PHP 開発の基本チュートリアル AJAX と MySQL
AJAX データベース インスタンス
AJAX を使用してデータベースと対話的に通信できます
次の例は、Web ページが AJAX を通じてデータベースから情報を読み取る方法を示します
ドロップダウンから 1 つ選択してください左側(cè)のダウンリスト クライアント:
この例は 4 つの要素で構(gòu)成されています:
MySQL データベース
単純な HTML フォーム
JavaScript
PHP ページ
データベース
Ben たとえば、データベースに次のデータテーブルを作成する必要があります:
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)就緒時執(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 事件會在域的內(nèi)容改變時觸發(fā)
當(dāng)用戶在上面的下拉列表中選擇某位用戶時，會執(zhí)行名為 "showUser()" 的函數(shù)
-->
<select name="users" onchange="showUser(this.value)">
<option value="">選擇一個人：</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 イベント実行 showUser() 関數(shù)を通して
showUser() 関數(shù)は次の手順を?qū)g行します:
ユーザーが選択されているかどうかを確認(rèn)する
XMLHttpRequest オブジェクトを作成する
サーバー応答の準(zhǔn)備ができたときに実行される関數(shù)を作成します
-
サーバー上のファイルにリクエストを送信します
URLの末尾に追加されるパラメータ(q)に注意してください(ドロップダウンリストの內(nèi)容）
PHPページ
上記 JavaScript経由で呼び出されるサーバーページは、「2.php」という名前のPHPファイルです。
「2.php」のソース コードは、MySQL データベースに対してクエリを?qū)g行し、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í)體験
この例には、主に次の知識ポイントが含まれています。 :
フォームの基本: ドロップダウン オプション
onchange イベント: フィールドの內(nèi)容が変更されたときに発生します
関數(shù)呼び出し、関數(shù)値の転送
AJAX XMLHttpRequest オブジェクトの作成、関數(shù)が実行されるタイミングサーバーが応答し、サーバー上のファイルにリクエストを送信します。學(xué)習(xí)體験については 1-5 を參照してください
HTML DOM getElementById() メソッド: 指定された ID を持つ最初のオブジェクトへの參照を返します
データベースの作成、データベース接続、選択 データベース、文字セットの設(shè)定、ID に基づいたデータベースからのクエリ、データベースの內(nèi)容のループアウト
データベースに関連する関數(shù):
mysqli_connect(): MySQL への新しい接続を開きますサーバー
mysqli_error(): 前の MySQL 操作によって生成されたテキスト エラー メッセージを返します。
mysqli_select_db(): 接続のデフォルトのデータベースを変更するために使用されます
mysqli_query(): データベースに対してクエリを?qū)g行します
mysqli_fetch_array(): 結(jié)果セットから連想配列として行を取得しますまたは數(shù)値配列、または両方
