249建站之家:PHP+AJAX 投票器功能

终于到AJAX,翻译过来就是”异步Javascript和XML”,他可以实现网页内容的部分加载,可提高用户体验。现在有很多网站都有用这技术,反正你知道他能实现网页的异步更新就差不多了。当然下面的例子都相对简单,并没有体现它这一特点~投票器


新建文件【 AJAX投票.html】


<html>

<head>

  <script type="text/javascript">

    // 这里是js代码

    function getVote(int) {

      if (window.XMLHttpRequest) {

        // 创建 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) {

          // 找到 id 为 poll 的控件

          document.getElementById('poll').innerHTML = xmlhttp.responseText;

        }

      }

      // 向PHP脚本传递主要参数q

      xmlhttp.open("GET", "poll_vote.php?q=" + int, true);

      xmlhttp.send();

    }

  </script>

</head>

<body>

  <div id="poll">

    <h3>你喜欢吃吗?</h3>

    <form>

      是:<input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br>

      否:<input type="radio" name="vote" value="1" onclick="getVote(this.value)">

    </form>

  </div>

</body>

</html>

创建【poll_vote.php】脚本文件


<?php

  // 接收参数q

  $vote = htmlspecialchars($_REQUEST['q']);

  // 获取文件中存储的数据(这里需要在同一目录下新建一个poll_result.txt文件)

  $filename = "poll_result.txt";

  $conn = file($filename);

  // 将数据分割到数组

  $array = explode("||", $conn[0]);

  $yes = $array[0];

  $no = $array[1];

  $count = $array[2];

  if ($vote == 0) {

    $yes += 1;

    $count += 1;

  }

  if ($vote == 1) {

    $no += 1;

    $count += 1;

  }

  // 将投票数据保存到文档

  $insertvote = $yes . '||' . $no . '||' . $count;

  $fp = fopen($filename, "w");

  fputs($fp, $insertvote);

  fclose($fp);

 ?>

 <h2>结果:</h2>

 <table>

  <tr>

    <td>是:</td>

    <td>

      <span style="display: inline-block; background-color: green; width: <?php echo 100 * round($yes / ($yes + $no), 2);?>px; height: 20px;"></span><?php echo 100 * round($yes / ($yes + $no), 2); ?>%

    </td>

  </tr>

  <tr>

    <td>否:</td>

    <td>

      <span style="display: inline-block; background-color: red; width: <?php echo 100 * round($no / ($yes + $no), 2);?>px; height: 20px;"></span><?php echo 100 * round($no / ($yes + $no), 2); ?>%

    </td>

  </tr>

 </table>

 <p><?php echo "参与人数:" . $count; ?></p>


新建一个空白的文档 【poll_result.txt】

此时目录:

|-AJAX投票.html 

|-poll_vote.php 

|-poll_result.txt

如果不同则需修改上面相应的代码


推荐

  • QQ空间

  • 新浪微博

  • 人人网

  • 豆瓣

取消