当前位置: 首页 > 图文教程 > 网络编程 > PHP > PHP+AJAX教程(5):AJAX MySQL数据库实例

PHP
php 清除网页病毒的方法
php 远程关机操作的代码
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
PHP 出现乱码和Sessions验证问题的解决方法!
php2html php生成静态页函数
中英文字符串翻转函数
php escape URL编码
PHP Google的translate API代码
php 文件状态缓存带来的问题
linux下 C语言对 php 扩展
php mssql 数据库分页SQL语句
php IP及IP段进行访问限制的代码
PHP 采集程序 常用函数
php 设计模式之 单例模式
php 设计模式之 工厂模式
php xml-rpc远程调用
php 获取完整url地址
PHP MSSQL 存储过程的方法
PDP Document 代码注释规范
PHP HTML代码串截取代码

PHP+AJAX教程(5):AJAX MySQL数据库实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 238 ::
收藏到网摘: n/a

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

AJAX 数据库实例

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

在下拉列表中选择一个名字 (测试说明:该实例功能未实现)

Select a User:

在此列出用户信息。

此列由四个元素组成:

  • 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" 占位符