（三）AJAX基本介绍和简单实例03

AJAX基本介绍和简单实例03-----Ajax与数据库的动态应用

初始界面：

选择所有用户后显示的界面：

查询姓名为杜森的客户，结果如下：

<html>
<Metahttp-equiv="content-type"content="text/html"charset="utf-8"/>
<head>
<style>
body
{
	background:#CCC;
	color:#F00;
}
</style>
<scripttype="text/javascript">
/*
Javascript部分大家应该可以看得懂，如果不明白的话，可以参见前两讲!
*/
functionshowCustomer(str)
{
varxmlhttp;
if(str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./Demo03.PHP?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
 
<formaction=""style="margin-top:15px;">
<label>请选择一位客户：
<!--下拉框的值改变时激发的事件，用onchange事件-->
<selectname="customers"onchange="showCustomer(this.value)"style="font-family:Verdana,Arial,Helvetica,sans-serif;">
<optionvalue="">请选择以下客户</option>
<optionvalue="all">所有客户</option>
<optionvalue="杜森">杜森</option>
<optionvalue="邱阳阳">邱阳阳</option>
<optionvalue="董小姐">董小姐</option>
<optionvalue="赵雪妍">赵雪妍</option>
<optionvalue="张若萍">张若萍</option>
</select>
</label>
</form>
<br/>
<divid="txtHint"></div>
 
</body>
</html>

Demo03.PHP 代码如下:

<?PHP
//获取到传递过来的用户名的值
$username=$_GET['q'];
//判断是否显示所有的客户信息
if($username=="all")
{
$sql="select*fromuser_info";
}
else
{
$sql="select*fromuser_infowhereusername='$username'";
}
//声明对象数据库操作对象
$MysqLi=newMysqLi();
//参数依次为主机名，数据库用户名，数据库密码,数据库名称
$conn=$MysqLi->connect("localhost","root","","Ajax_demo");
//设定字符集为utf8格式
$MysqLi->set_charset("utf8");
 
$result=$MysqLi->query($sql,$conn);
$return_str="";
$return_str.="<table>";
$return_str.="<tr>
<td>ID</td>
			<td>Username</td>
			<td>Sex</td>
			<td>address</td>
			<td>telephone</td>
			</tr>";
 
while(!!$row=$result->fetch_array())
{
	
$return_str.="<tr>
<td>".$row['id']."</td>
				<td>".$row['username']."</td>
				<td>".$row['sex']."</td>
				<td>".$row['address']."</td>
				<td>".$row['telephone']."</td>
				</tr>";	
}
$return_str.="</table>";
echo$return_str;
?>

MysqL 数据库对应的sql语句：

--PHPMyAdminsqlDump
--version2.11.2.1
--http://www.PHPmyadmin.net
--
--主机:localhost
--生成日期:2015年01月31日15:18
--服务器版本:5.0.45
--PHP版本:5.2.5
 
SETsql_MODE="NO_AUTO_VALUE_ON_ZERO";
 
--
--数据库:`ajax_demo`
--
CREATEDATABASE`ajax_demo`DEFAULTCHARACTERSETutf8COLLATEutf8_general_ci;
USE`ajax_demo`;
 
----------------------------------------------------------
 
--
--表的结构`user_info`
--
 
CREATETABLE`user_info`(
`id`int(10)unsignedNOTNULLauto_incrementCOMMENT'//用户编号',`username`varchar(40)NOTNULLCOMMENT'//用户姓名',`sex`varchar(4)NOTNULLCOMMENT'//用户性别',`address`varchar(100)NOTNULL,`telephone`varchar(11)NOTNULL,PRIMARYKEY(`id`),UNIQUEKEY`username`(`username`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8AUTO_INCREMENT=6;
 
--
--导出表中的数据`user_info`
--
 
INSERTINTO`user_info`(`id`,`username`,`sex`,`address`,`telephone`)VALUES
(1,'杜森','男','河南省新乡市新乡县','13723145623'),(2,'邱阳阳','河南省信阳市','13723325623'),(3,'董小姐','女','河南省周口市',(4,'张若萍','河南省洛阳市','13723325423'),(5,'赵雪妍','开封市','13723325423');

提示：如果数据库连接错误，请修改Demo03.PHP第15行的数据库连接信息，配置成您对应的数据库信息。

如果有什么错误的地方，欢迎的大家指正，如果想了解我更多，可以连接http://blog.sina.com.cn/u/5379705731九骥网维工作室微博！

（三）AJAX基本介绍和简单实例03

猜你在找的Ajax相关文章