在上一篇的文章内容中,我们学习了ajax的异步请求的实现,通过一个简单的案例了解了ajax的运行机制,现在我们就来运用一下ajax的原理,通过了一个案例来让大家对ajax的异步请求有更加深刻的理解,这个案例是一个简单的投票系统,让我们来一起去实现它吧!
需求:
这个一个对某一个问题进行投票的系统,有赞成和不赞成两种观点,不管你点击哪一种观点,都会列出实时的投票情况的统计。
具体步骤如下:
1、制作投票系统的静态页面
新建一个html文件,在里面制作投票系统的静态界面,设置一个问题,两个观点,这两个观点是单选按钮,同时为这两个单选按钮添加一个click的事件,同时在下方添加一个div块,用来显示投票的情况。代码如下:
你同意李天可来做班长吗
NO
YES
2、异步请求
接下来我们在javascript脚本中填写异步请求的脚本,首先是接收点击事件所触发的值,然后将这个值传给后台ajax.php。代码如下:
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?vote="+p_str,true);
info_http.send();
3、后台处理数据并返回信息
新建一个ajax.php文件,对从前端(html页面)传来的参数进行接收,接收之后,我们对其进行判断,如果是赞同的观点,我们就为赞同观点多加一票,票数数字的统计数据被存放在toupiao.txt这个文件中,统计完投票之后,我们再将这个数据返回给前端,具体代码如下:
$toupiao=$_GET['vote'];
$contents=file("toupiao.txt");
$shuzu=explode("||", $contents[0]);
$no=$shuzu[0];
$ok=$shuzu[1];
if($toupiao==0){
$no+=1;
}
if($toupiao==1){
$ok+=1;
}
$insertvalue=$no."||".$ok;
$fp=fopen("toupiao.txt", "w");
fputs($fp,$insertvalue);
fclose($fp);
//进行输出
echo "
echo "
赞同不赞同";echo "
".$ok."".$no."";
4、测试投票系统
打开mysql和apache服务,在浏览器输入网址进行访问,点击单选按钮进行投票,在下面就会出现投票的一个统计情况。
举报/反馈