PHP 和 AJAX MySQL

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 MySQL 数据库中读取信息。

在下拉列表中选择一个名字（测试说明：该实例功能未实现）

Select a User:
Peter Griffin

Lois Griffin

Joseph Swanson

Glenn Quagmire

在此列出用户信息。

此列由四个元素组成：

MySQL 数据库
简单的 HTML 表单
JavaScript
PHP 页面

数据库

将在本例中使用的数据库看起来类似这样：

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 表单

上面的例子包含了一个简单的 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 表单

正如您看到的，它仅仅是一个简单的 HTML 表单，其中带有名为 "users" 的下拉列表，这个列表包含了姓名，以及与数据库的 "id" 对应的选项值。

表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。

当用户选择数据时，执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。

换句话说：每当用户改变下拉列表中的值，就会调用 showUser() 函数。

JavaScript

这是存储在 "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 函数与 PHP AJAX 请求那一节中的相同，您可以参阅其中的相关解释。

showUser() 函数

假如下拉列表中的项目被选择，函数执行：

调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
定义发送到服务器的 URL（文件名）
向 URL 添加带有下拉列表内容的参数 (q)
添加一个随机数，以防服务器使用缓存的文件
当触发事件时调用 stateChanged
通过给定的 URL 打开 XMLHTTP 对象
向服务器发送 HTTP 请求

PHP 页面

由 JavaScript 调用的服务器页面，是名为 "getuser.php" 的简单 PHP 文件。

该页面用 PHP 编写，并使用 MySQL 数据库。

其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：

<?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);

?>

例子解释：

当查询从 JavaScript 被发送到这个 PHP 页面，会发生：

PHP 打开到达 MySQL 服务器的连接
找到拥有指定姓名的 "user"
创建表格，插入数据，然后将其发送到 "txtHint" 占位符

CODE

test.html

 <! DOCTYPE HTML>

 <html>

 <head>

 <script src="test.js"></script>

 </head>

 <body>

 <select name="users" onchange="showUser(this.value)">

 <option value="1" >peter</option>

 <option value="2">lois</option>

 <option value="3">joseph</option>

 </select>

 <p>

 <div id="txtHint">info:<br/>

 </div>

 </p>

 </body>

 </html>

test.js

 var xmlHttp;

 function showUser(str) {

     xmlHttp=GetXmlHttpObject();

     if(xmlHttp == null)

     {        alert("not support");

     return;

     }

     var url = "test.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;

     try {

         xmlHttp = new XMLHttpRequest();

     }

     catch(e) {

         try {

             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

         }

         catch(e) {

             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

         }

     }

     return xmlHttp;

 }

test.php

 <html>

 <head>

 </head>

 <body>

 <?php

 $q = $_GET['q'];

 $con = mysql_connect("localhost","root","123456");

 if(!$con)

     alert("not connect".mysql_error);

 mysql_select_db("test",$con);

 $sql = "select * from ranking where Id='$q'";

 $result = mysql_query($sql);

 while($row = mysql_fetch_array($result))

 {

     echo "id:".$q."====".$row['Id']."<br/>FName:".$row['FName']."<br/>Age:".$row['Age']."<br/>";

 }

 mysql_close();

 function Alert($Str,$Typ="back",$TopWindow="",$Tim=100){

 echo "<script>".chr(10);

   if(!empty($Str)){

     echo "alert(\"Warning:\\n\\n{$Str}\\n\\n\");".chr(10);

   }

   echo "function _r_r_(){";

   $WinName=(!empty($TopWindow))?"top":"self";

   switch (StrToLower($Typ)){

   case "#":

     break;

   case "back":

     echo $WinName.".history.go(-1);".chr(10);

     break;

   case "reload":

     echo $WinName.".window.location.reload();".chr(10);

     break;

   case "close":

     echo "window.opener=null;window.close();".chr(10);

     break;

   case "function":

     echo "var _T=new function('return {$TopWindow}')();_T();".chr(10);

     break;

     //Die();

   Default:

     if($Typ!=""){

       //echo "window.{$WinName}.location.href='{$Typ}';";

       echo "window.{$WinName}.location=('{$Typ}');";

     }

   }

   echo "}".chr(10);

   //為防止Firefox不執行setTimeout

   echo "if(setTimeout(\"_r_r_()\",".$Tim.")==2){_r_r_();}";

   if($Tim==100){

     echo "_r_r_();".chr(10);

   }else{

     echo "setTimeout(\"_r_r_()\",".$Tim.");".chr(10);

   }

   echo "</script>".chr(10);

   Exit();

 }

 ?>

 </body>

 </html>

MySQL 预配置