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

前台显示界面：

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

选择所有客户之后：

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

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

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

Demo03.html代码

<html>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<head>
<style>
body
{
	background:#CCC;
	color:#F00;
}
</style>
<script type="text/javascript">
/*
Javascript部分大家应该可以看得懂，如果不明白的话，可以参见前两讲!
*/
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("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>

<form action="" style="margin-top:15px;"> 
<label>请选择一位客户：
<!--下拉框的值改变时激发的事件，用onchange事件-->
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="">请选择以下客户</option>
<option value="all">所有客户</option>
<option value="杜森">杜森</option>
<option value="邱阳阳">邱阳阳</option>
<option value="董×××">董×××</option>
<option value="赵雪妍">赵雪妍</option>
<option value="张若萍">张若萍</option>
</select>
</label>
</form>
<br />
<div id="txtHint"></div>

</body>
</html>

Demo03.php代码

<?php
//获取到传递过来的用户名的值
$username=$_GET['q'];
//判断是否显示所有的客户信息
if($username=="all")
{
$sql="select * from user_info";
}
else
{
$sql="select * from user_info where username='$username'";
}
//声明对象数据库操作对象
$mysqli=new mysqli();
//参数依次为主机名，数据库用户名，数据库密码,数据库名称
$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代码

-- phpMyAdmin SQL Dump
-- version 2.11.2.1
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2015 年 01 月 31 日 16:09
-- 服务器版本: 5.0.45
-- PHP 版本: 5.2.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- 数据库: `ajax_demo`
--
CREATE DATABASE `ajax_demo` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `ajax_demo`;

-- --------------------------------------------------------

--
-- 表的结构 `user_info`
--

CREATE TABLE `user_info` (
  `id` int(10) unsigned NOT NULL auto_increment COMMENT '//用户编号',
  `username` varchar(40) NOT NULL COMMENT '//用户姓名',
  `sex` varchar(4) NOT NULL COMMENT '//用户性别',
  `address` varchar(100) NOT NULL,
  `telephone` varchar(11) NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

--
-- 导出表中的数据 `user_info`
--

INSERT INTO `user_info` (`id`, `username`, `sex`, `address`, `telephone`) VALUES
(1, '杜森', '男', '河南省新乡市新乡县', '13723145623'),
(2, '邱阳阳', '男', '河南省信阳市', '13723325623'),
(3, '董×××', '女', '河南省周口市', '13723325623'),
(4, '张若萍', '女', '河南省洛阳市', '13723325423'),
(5, '赵雪妍', '女', '开封市', '13723325423');

提示：如果数据库连接失败，请修改Demo03.php中的第16行代码，重新配置数据库的信息。

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