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

发布时间：2020-12-15 21:44:42 所属栏目：百科来源：网络整理

导读：（三）AJAX基本介绍和简单实例03-----Ajax与数据库的动态应用前台显示界面： 650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" style="float:none;" title="1.png" alt="wKioL1TM_tuCDOAuAAAppR2jHJc246.jpg" src="http://s3.51ct

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

前台显示界面：

选择所有客户之后：

选择其中一个客户---杜森：

Demo03.html代码

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

Sql代码

--phpMyAdminSQLDump
--version2.11.2.1
--http://www.phpmyadmin.net
--
--主机:localhost
--生成日期:2015年01月31日16:09
--服务器版本: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中的第16行代码，重新配置数据库的信息。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!