在制作网站的时候,网站的网页经常需要跟后台进行交互,进行交互的时候,按照传统的方法,需要重新刷新一下网页,更新的内容才会显示出来,然而自从ajax诞生以来,进行网页内容的更新已经不需要我们去重新刷新网页了,直接直观地显示在页面上,不影响页面的其他操作,这就是ajax的异步请求,借助ajax,只需4步,轻松实现异步请求,接下来我们来通过一个案例来实现这个功能。
需求:
现在我们想要在下拉列表中选择一个人名,选择之后,就在下面显示这个人的基本信息,用户名,年龄和注册日期等。
步骤:
1、制作一个下拉按钮和div
新建一个html的页面,在页面中新建一个下拉列表和一个div,这个下拉列表是用来显示姓名的,供用户进行选择的,而div这个框则是显示服务器返回来的用户的信息的,在表单中,增加了一个onchange的事件,用户选择了姓名之后就会触发这个事件,代码如下:
请选择一个人名
liming
li_hao
li
2、ajax异步请求。
ajax的异步请求分为3步,代码放在script的标签里面,首先是新建一个XMLHttpRequest的请求对象,然后是状态改变时触发的函数(onreadystatechange),最后就是发送请求,请求用get和post请求两种,这里用的是post请求,实例如下:
info_http=new XMLHttpRequest();
info_http.onreadystatechange=function(){
if(info_http.readyState==4 && info_http.status==200 ){
document.getElementById('info').innerHTML=info_http.responseText;
}
}
info_http.open("GET","ajax.php?person="+p_str,true);
info_http.send();
3、php后台返回信息
新建一个php文件,用来接收来自ajax的请求,在php中,接收到一个姓名,然后再拿这个姓名去数据库中找出来,将这个人的信息返回去,我们用echo 输出,我们的ajax就可以接收到这些信息了,代码如下:
$person=$_GET['person'];
$yonghu="root";
$mima="";
$server="localhost";
$dbname="ceshi";
$lianjie=new mysqli($server,$yonghu,$mima,$dbname);
$sql="select * from test1 where username='".$person."'";
echo "
名字 | 年龄 | 注册日期 |
";
$data=$lianjie->query($sql);
if($data->num_rows>0){
while ($result=$data->fetch_assoc()) {
echo "
".$result['username']."".$result['age']."".$result['register_time']."";
}
}
4、测试
开启我们本地电脑中的mysql和apache服务,打开浏览器,输入网址进行访问测试。
举报/反馈