PHP-AJAXとMySQL

16351 ワード

PHP-AJAXとMySQL
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()関数では、次の手順に従います.
  • サイトが選択されているかどうかを確認
  • XMLHttpRequestオブジェクトの作成
  • サーバ応答が完了したときに実行される関数の作成
  • サーバ上のファイルに要求を送信
  • URL末端に追加されたパラメータ(q)(ドロップダウンリストの内容を含む)
  • PHPファイル
    上の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ファイルにクエリが送信されると、次のようになります.
  • PHP MySQLデータベースへの接続を開く
  • 選択したユーザーが見つかりました
  • HTMLテーブルを作成し、データを埋め込み、「txtHint」プレースホルダ
  • に返信する