一个下拉框,根据选择项,和数据库进行比对,最后传回来相应的提示信息,
首先配置数据库(学习用的wamp的mysql)示例:
create database ajax charset=utf8;
use ajax;
create table user(
id int auto_increment comment 'id',
firstname varchar(20) not null,
lastname varchar(20) not null ,
age int not null,
hometown varchar(20) not null ,
job varchar(20),
primary key(id)
)charset=utf8;
insert user(firstname,lastname,age,hometown,job)
value
('Peter', 'Griffin',41,'Quahog','Brewery'),
('Lois' , 'Griffin',40,'Newport','Piano Teacher'),
('Joseph','Swanson',39,'Quahog','Police Officer'),
('Glenn' ,'Quagmire',41,'Quahog','Pilot');
然后php代码如下:
<?php
header("Content-Type:text/html;Charset=utf-8");
$q=$_GET['q'];
//连接数据库
$conn=mysqli_connect('localhost:3306','root','');
if(!$conn){
die('数据库连接失败'.mysql_error($conn));
};
mysqli_query($conn,'use ajax');
$sql="select * from user where id=$q";
$result=mysqli_query($conn,$sql);
$row= mysqli_fetch_assoc($result);
$row=json_encode($row);//转成JSON形式字符串
echo ($row);
mysqli_close($conn);
?>
最后附上html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 style="font-size: 100px;text-align: center;">AJAX</h1>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<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>
<br>
<div id="txtHint">
<b>Person info will be listed here.</b>
</div>
<hr />
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>age</td>
<td>hometown</td>
<td>job</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var tbody=document.getElementsByTagName('tbody')[0];
var str='';
function showUser(str){
//检查是否有用户被选择
if (str==""){
tbody.innerHTML='';
return;
}
//创建 XMLHttpRequest 对象
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//创建在服务器响应就绪时执行的函数
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//把字符串转为json 对象
var data=JSON.parse(xmlhttp.responseText);
tbody.innerHTML ='<tr><td>'+data['firstname']+'</td><td>'+data['LastName']+'</td><td>'+data['age']+'</td><td>'+data['hometown']+'</td><td>'+data['job']+'</td></tr>';//当然,数据多可以用for in遍历
}
}
//请注意添加到 URL 末端的参数(q)(包含下拉列表的内容)
xmlhttp.open("GET","9.php?q="+str,true);
//向服务器上的文件发送请求
xmlhttp.send();
// 如果是用post:
/*
//创建一个请求
xmlhttp.open('post',"./9.php?",true);
//设置http头协议信息
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
var info="q="+str;
//发送请求
xmlhttp.send(info);
*/
}
</script>
</body>
</html>