用Ajax写一个简单的投票系统PHP,ajax应用实例——投票系统功能的实现

在上一篇的文章内容中，我们学习了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服务，在浏览器输入网址进行访问，点击单选按钮进行投票，在下面就会出现投票的一个统计情况。

举报/反馈