开发者社区> 速贷100> 正文

PHP 实例 - AJAX 投票

简介: AJAX 投票 在下面的实例中,我们将演示一个投票程序,通过它,投票结果在网页不进行刷新的情况下被显示。   实例解释 - HTML 页面 当用户选择上面的某个选项时,会执行名为 "getVote()" 的函数。
+关注继续查看

AJAX 投票

在下面的实例中,我们将演示一个投票程序,通过它,投票结果在网页不进行刷新的情况下被显示。

 

实例解释 - HTML 页面

当用户选择上面的某个选项时,会执行名为 "getVote()" 的函数。该函数由 "onclick" 事件触发:

  1. <html>
    <head>
    <script>
    function getVote(int)
    {
    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("poll").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","poll_vote.php?vote="+int,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <div id="poll">
    <h3>Do you like PHP and AJAX so far?</h3>
    <form>
    Yes:
    <input type="radio" name="vote" value="0" onclick="getVote(this.value)">
    <br>No:
    <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
    </form>
    </div>

    </body>
    </html>
复制

getVote() 函数会执行以下步骤:

  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数(q)(包含下拉列表的内容)

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "poll_vote.php" 的 PHP 文件:

  1. <?php
    $vote = $_REQUEST['vote'];

    //get content of textfile
    $filename = "poll_result.txt";
    $content = file($filename);

    //put content in array
    $array = explode("||", $content[0]);
    $yes = $array[0];
    $no = $array[1];

    if ($vote == 0)
    {
    $yes = $yes + 1;
    }
    if ($vote == 1)
    {
    $no = $no + 1;
    }

    //insert votes to txt file
    $insertvote = $yes."||".$no;
    $fp = fopen($filename,"w");
    fputs($fp,$insertvote);
    fclose($fp);
    ?>

    <h2>Result:</h2>
    <table>
    <tr>
    <td>Yes:</td>
    <td>
    <img src="poll.gif"
    width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
    height='20'>
    <?php echo(100*round($yes/($no+$yes),2)); ?>%
    </td>
    </tr>
    <tr>
    <td>No:</td>
    <td>
    <img src="poll.gif"
    width='<?php echo(100*round($no/($no+$yes),2)); ?>'
    height='20'>
    <?php echo(100*round($no/($no+$yes),2)); ?>%
    </td>
    </tr>
    </table>
复制

当所选的值从 JavaScript 发送到 PHP 文件时,将发生:

  1. 获取 "poll_result.txt" 文件的内容
  2. 把文件内容放入变量,并向被选变量累加 1
  3. 把结果写入 "poll_result.txt" 文件
  4. 输出图形化的投票结果

文本文件

文本文件(poll_result.txt)中存储来自投票程序的数据。

它存储的数据如下所示:

  1. 3||4
复制

第一个数字表示 "Yes" 的投票数,第二个数字表示 "No" 的投票数。

注释:请记得只允许您的 Web 服务器来编辑该文本文件。不要让其他人获得访问权,除了 Web 服务器 (PHP)。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
9 0
手撸一款简单高效的线程池(五)
在之前的内容中,我们给大家介绍了 C++实现线程池过程中的一些常用线优化方案,并分析了不同机制使用时的利弊。这一篇,是线程池系列的最后一章。我们会介绍一下 CGraph 中的 threadpool 如何使用,给出性能对比,并对接下来的工作做一些展望。让我们在线程池性能优化和功能提升的道路上,越走越远。
5 0
比赛-以企业为服务目标的政策大数据应用
比赛-以企业为服务目标的政策大数据应用
4 0
心中有“树”!图文并茂介绍数据结构中常见的树(一)
提到数据结构中的树(Tree) ,大家应该都不陌生,相关书籍中都有大段篇幅的介绍,刷 Leetcode 的时候会遇到很多相关问题。很多人往往会用 “手写红黑树” 来形容面试难度很高。
9 0
心中有“树”!图文并茂介绍数据结构中常见的树(二)
计算机科学家尼古拉斯·沃斯(Niklaus Wirth)曾说过:编程=数据结构+算法 ,可见数据结构在编程中的重要性。
4 0
在函数中使用局部变量并且通过局部变量返回函数值的方案来了
感谢小游戏可视化体验官群中的一位叫做“@天羽地王”的朋友提供的思路。本文内容主要包括如何在函数中使用局部变量并且通过局部变量来返回函数的结果值。
7 0
微信小游戏推广运营专业术语汇总
本文内容包括与微信小游戏运营推广相关的专业术语的汇总和解释。作为一个游戏开发者,不光要知道如何做游戏,也要知道如何让别人玩自己做的游戏。
4 0
如何在小游戏制作工具中使用云函数
本节试图以最简单的方式带你了解如何在小程序后台申请和开通云开发服务,创建并编写第一个云函数并在小游戏制作工具中对其进行调用。
9 0
+关注
28
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载