PHP-AJAXとMySQL
16351 ワード
PHP-AJAXとMySQL
AJAXは、データベースとのインタラクティブな通信に使用できます.
AJAXデータベースの例
次の例では、AJAXを使用してデータベースから情報を読み込む方法を示します.
このチュートリアルで使用するWebsitesテーブルSQLファイル:webssites.sql.
≪インスタンス|Instance|emdw≫
つのウェブサイトを選びます:Google宝を洗う野菜と鳥教程の微博Facebook
対応するオプションを選択すると、ユーザー情報がここに表示されます.
インスタンスの説明-MySQLデータベース
上記の例では、使用するデータベース・テーブルを次のように示します.
インスタンスの説明-HTMLページ
ユーザーが上のドロップダウンリストからユーザーを選択すると、showSite()という関数が実行されます.この関数はonchangeイベントによってトリガーされます.
test.htmlファイルコード:
showSite()関数では、次の手順に従います.サイトが選択されているかどうかを確認 XMLHttpRequestオブジェクトの作成 サーバ応答が完了したときに実行される関数の作成 サーバ上のファイルに要求を送信 URL末端に追加されたパラメータ(q)(ドロップダウンリストの内容を含む) PHPファイル
上のJavaScriptで呼び出されたサーバーページは、「getsite_mysql.php」というPHPファイルです.
「getsite_mysql.php」のソースコードは、MySQLデータベースのクエリーを実行し、HTMLテーブルで結果を返します.
getsite_mysql.phpファイルコード:
説明:JavaScriptからPHPファイルにクエリが送信されると、次のようになります.PHP MySQLデータベースへの接続を開く 選択したユーザーが見つかりました HTMLテーブルを作成し、データを埋め込み、「txtHint」プレースホルダ に返信する
AJAXは、データベースとのインタラクティブな通信に使用できます.
AJAXデータベースの例
次の例では、AJAXを使用してデータベースから情報を読み込む方法を示します.
このチュートリアルで使用するWebsitesテーブルSQLファイル:webssites.sql.
≪インスタンス|Instance|emdw≫
つのウェブサイトを選びます:Google宝を洗う野菜と鳥教程の微博Facebook
対応するオプションを選択すると、ユーザー情報がここに表示されます.
インスタンスの説明-MySQLデータベース
上記の例では、使用するデータベース・テーブルを次のように示します.
mysql> select * from websites;
+----+--------------+---------------------------+-------+---------+
| id | name | url | alexa | country |
+----+--------------+---------------------------+-------+---------+
| 1 | Google | https://www.google.cm/ | 1 | USA |
| 2 | | https://www.taobao.com/ | 13 | CN |
| 3 | | http://www.runoob.com/ | 4689 | CN |
| 4 | | http://weibo.com/ | 20 | CN |
| 5 | Facebook | https://www.facebook.com/ | 3 | USA |
+----+--------------+---------------------------+-------+---------+
5 rows in set (0.01 sec)
インスタンスの説明-HTMLページ
ユーザーが上のドロップダウンリストからユーザーを選択すると、showSite()という関数が実行されます.この関数はonchangeイベントによってトリガーされます.
test.htmlファイルコード:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> (runoob.com)title>
<script>
function showSite(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getsite_mysql.php?q="+str,true);
xmlhttp.send();
}
script>
head>
<body>
<form>
<select name="users" onchange="showSite(this.value)">
<option value=""> :option>
<option value="1">Googleoption>
<option value="2"> option>
<option value="3"> option>
<option value="4"> option>
<option value="5">Facebookoption>
select>
form>
<br>
<div id="txtHint"><b> ……b>div>
body>
html>
showSite()関数では、次の手順に従います.
上のJavaScriptで呼び出されたサーバーページは、「getsite_mysql.php」というPHPファイルです.
「getsite_mysql.php」のソースコードは、MySQLデータベースのクエリーを実行し、HTMLテーブルで結果を返します.
getsite_mysql.phpファイルコード:
php
$q = isset($_GET["q"]) ? intval($_GET["q"]) : '';
if(empty($q)) {
echo ' ';
exit;
}
$con = mysqli_connect('localhost','root','123456');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
//
mysqli_select_db($con,"test");
// ,
mysqli_set_charset($con, "utf8");
$sql="SELECT * FROM Websites WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "";
while($row = mysqli_fetch_array($result))
{
echo "";
echo "";
echo "";
echo "";
echo "";
echo "";
echo "";
}
echo "
ID
URL
Alexa
" . $row['id'] . " " . $row['name'] . " " . $row['url'] . " " . $row['alexa'] . " " . $row['country'] . "
";
mysqli_close($con);
?>
説明:JavaScriptからPHPファイルにクエリが送信されると、次のようになります.