鍍金池/ 教程/ HTML/ Ajax 數據庫操作
Ajax 技術(shù)
Ajax 安全
Ajax 示例
Ajax 瀏覽器支持
Ajax 實(shí)戰
Ajax XMLHttpRequest
什么是 Ajax?
Ajax 數據庫操作
Ajax 相關(guān)問(wèn)題

Ajax 數據庫操作

為了清楚的說(shuō)明使用 Ajax 從數據庫中存取信息有多么容易,我們要構建一個(gè) MySQL 查詢(xún),然后把結果顯示在 ajax.html 上。但是在我們開(kāi)始之前,讓我們先做一些基礎工作。使用下面的命令創(chuàng )建一個(gè)數據表。

注意: 我們假設你有足夠的權限執行以下 MySQL 操作。

CREATE TABLE 'Ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

然后使用下面的 SQL 語(yǔ)句把下列數據存到這個(gè)表中:

INSERT INTO 'Ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'Ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'Ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'Ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'Ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'Ajax_example' VALUES ('Julie', 35, 'f', 90);

客戶(hù)端 HTML 文件

現在讓我們來(lái)建立客戶(hù)端的 HTML 文件,也就是 ajax.html,它包含如下代碼:

<html>
<body>
<script language="javascript" type="text/javascript">
<!-- 
// 瀏覽器支持代碼
function AjaxFunction(){
    var AjaxRequest;  // 緩存 XMLHttpRequest 對象
    try{

        // Opera 8.0+, Firefox, Safari
        AjaxRequest = new XMLHttpRequest();
    }catch (e){

        // Internet Explorer Browsers
        try{
            AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {

            try{
                AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){

                // 錯誤處理
                alert("Your browser broke!");
                return false;
            }
        }
    }

    // 創(chuàng  )建一個(gè)接受服務(wù)器發(fā)送的數據的函數,它還會(huì )更新同一頁(yè)面的 div 部分。
    AjaxRequest.onreadystatechange = function(){

        if(AjaxRequest.readyState == 4){
            var AjaxDisplay = document.getElementById('AjaxDiv');
            AjaxDisplay.innerHTML = AjaxRequest.responseText;
        }
    }

    // 然后獲取用戶(hù)輸入值并傳遞給服務(wù)器腳本
    var age = document.getElementById('age').value;
    var wpm = document.getElementById('wpm').value;
    var sex = document.getElementById('sex').value;
    var queryString = "?age=" + age ;

    queryString +=  "&wpm=" + wpm + "&sex=" + sex;
    AjaxRequest.open("GET", "Ajax-example.php" + queryString, true);
    AjaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>

    Max Age: <input type='text' id='age' /> <br />
    Max WPM: <input type='text' id='wpm' /> <br />
    Sex: 
    <select id='sex'>
      <option value="m">m</option>
      <option value="f">f</option>
    </select>
    <input type='button' onclick='AjaxFunction()' value='Query MySQL'/>

</form>
<div id='AjaxDiv'>結果會(huì )顯示在這里。</div>
</body>
</html>

注意: 在查詢(xún)中傳遞變量的方法取決于 HTML 標準以及我們使用哪種形式。

URL?variable1=value1;&variable2=value2;

上面的代碼會(huì )顯示一個(gè)如下所示的屏幕顯示:

注意: 這還是一個(gè)模擬的屏幕顯示,它還不能工作。

http://wiki.jikexueyuan.com/project/ajax/images/query-my-sql-1.png" alt="query-mysql-1" />

獲取到條目之后結果會(huì )顯示在這個(gè)部分。

注意: 這里是一個(gè)模擬的屏幕顯示。

服務(wù)端 PHP 文件

客戶(hù)端腳本已經(jīng)準備就緒?,F在,我們必須編寫(xiě)服務(wù)端腳本,它會(huì )從數據庫中提取 age,wpm 和 sex,然后把它們發(fā)送回客戶(hù)端。請把下面的代碼放到 "ajax-example.php" 中。

<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";

// 連接 MySQL 服務(wù)器
mysql_connect($dbhost, $dbuser, $dbpass);

// 選擇數據庫
mysql_select_db($dbname) or die(mysql_error());

// 從查詢(xún)字符串中檢索數據(字段)
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];

// 轉移用戶(hù)輸入便于防止 SQL 注入
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);

// 構建查詢(xún)
$query = "SELECT * FROM Ajax_example WHERE sex = '$sex'";

if(is_numeric($age))
    $query .= " AND age <= $age";

if(is_numeric($wpm))
    $query .= " AND wpm <= $wpm";

// 執行查詢(xún)
$qry_result = mysql_query($query) or die(mysql_error());

// 構建結果字符串
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";

// 針對返回的每個(gè) person 條目在表格中插入一個(gè)新行
while($row = mysql_fetch_array($qry_result)){
    $display_string .= "<tr>";
    $display_string .= "<td>$row[name]</td>";
    $display_string .= "<td>$row[age]</td>";
    $display_string .= "<td>$row[sex]</td>";
    $display_string .= "<td>$row[wpm]</td>";
    $display_string .= "</tr>";
}

echo "Query: " . $query . "<br />";
$display_string .= "</table>";

echo $display_string;
?>

現在可以嘗試在 Max Age 或者其他輸入框中輸入一個(gè)有效的值(比如 120),然后點(diǎn)擊 Query MySQL 按鈕。

http://wiki.jikexueyuan.com/project/ajax/images/query-my-sql-1.png" alt="query-mysql-1" />

獲取到條目之后結果將會(huì )顯示在這個(gè)部分

如果你成功完成這一課,那么你就知道如何串聯(lián)使用 MySQL,PHP,HTML 和 JavaScript 編寫(xiě) Ajax 應用程序了。

上一篇:Ajax 示例下一篇:Ajax XMLHttpRequest