PHP+AJAX 投票器功能

更新時(shí)間：2017年11月11日 11:45:28 作者：-瞌睡蟲(chóng)-

這篇文章主要介紹了PHP+AJAX 投票器功能，本文通過(guò)一個(gè)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下

終于到AJAX，翻譯過(guò)來(lái)就是”異步Javascript和XML”，他可以實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的部分加載，可提高用戶體驗(yàn)?，F(xiàn)在有很多網(wǎng)站都有用這技術(shù)，反正你知道他能實(shí)現(xiàn)網(wǎng)頁(yè)的異步更新就差不多了。當(dāng)然下面的例子都相對(duì)簡(jiǎn)單，并沒(méi)有體現(xiàn)它這一特點(diǎn)~

投票器

新建文件【 AJAX投票.html】

<html>
<head>
  <script type="text/javascript">
    // 這里是js代碼
    function getVote(int) {
      if (window.XMLHttpRequest) {
        // 創(chuàng)建 XMLHttpRequest 對(duì)象
        // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行的代碼
        xmlhttp = new XMLHttpRequest();
      } else {
        //IE6, IE5 瀏覽器執(zhí)行的代碼
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      // 監(jiān)聽(tīng)響應(yīng)
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState ==4 && xmlhttp.status == 200) {
          // 找到 id 為 poll 的控件
          document.getElementById('poll').innerHTML = xmlhttp.responseText;
        }
      }
      // 向PHP腳本傳遞主要參數(shù)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>

創(chuàng)建【poll_vote.php】腳本文件

<?php 
  // 接收參數(shù)q
  $vote = htmlspecialchars($_REQUEST['q']);
  // 獲取文件中存儲(chǔ)的數(shù)據(jù)(這里需要在同一目錄下新建一個(gè)poll_result.txt文件)
  $filename = "poll_result.txt";
  $conn = file($filename);
  // 將數(shù)據(jù)分割到數(shù)組
  $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;
  }
  // 將投票數(shù)據(jù)保存到文檔
  $insertvote = $yes . '||' . $no . '||' . $count;
  $fp = fopen($filename, "w");
  fputs($fp, $insertvote);
  fclose($fp);
 ?>
 <h2>結(jié)果：</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 "參與人數(shù)：" . $count; ?></p>

新建一個(gè)空白的文檔【poll_result.txt】

此時(shí)目錄：

|-AJAX投票.html
|-poll_vote.php
|-poll_result.txt

如果不同則需修改上面相應(yīng)的代碼

效果：

這里寫圖片描述