關於 AJAX 投票的示範

最後更新：2018-05-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

示範一個投票程式，通過它，投票結果在網頁不進行重新整理的情況下被顯示，本篇將示範投票的效果。

執行個體解釋 - HTML 頁面

當使用者選擇上面的某個選項時，會執行名為 "getVote()" 的函數。該函數由 "onclick" 事件觸發。

poll.html 檔案代碼如下：

<html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title><script>function getVote(int) {  if (window.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)    {      document.getElementById("poll").innerHTML=xmlhttp.responseText;    }  }  xmlhttp.open("GET","poll_vote.php?vote="+int,true);  xmlhttp.send();}</script></head><body><div id="poll"><h3>你喜歡 PHP 和 AJAX 嗎?</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>

getVote() 函數會執行以下步驟：

建立 XMLHttpRequest 對象

建立在伺服器響應就緒時執行的函數

向伺服器上的檔案發送請求

請注意添加到 URL 末端的參數（q）（包含下拉式清單的內容）

PHP 檔案

上面這段通過 JavaScript 調用的伺服器頁面是名為 "poll_vote.php" 的 PHP 檔案：

<?php$vote = htmlspecialchars($_REQUEST['vote']);// 擷取檔案中儲存的資料$filename = "poll_result.txt";$content = file($filename);// 將資料分割到數組中$array = explode("||", $content[0]);$yes = $array[0];$no = $array[1];if ($vote == 0){  $yes = $yes + 1;}if ($vote == 1){  $no = $no + 1;}// 插入投票資料$insertvote = $yes."||".$no;$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/($no+$yes),2)); ?>px;      height:20px;" ></span>  <?php echo(100*round($yes/($no+$yes),2)); ?>%  </td>  </tr>  <tr>  <td>否:</td>  <td>  <span style="display: inline-block; background-color:red;      width:<?php echo(100*round($no/($no+$yes),2)); ?>px;      height:20px;"></span>  <?php echo(100*round($no/($no+$yes),2)); ?>%  </td>  </tr></table>

當所選的值從 JavaScript 發送到 PHP 檔案時，將發生：

擷取 "poll_result.txt" 檔案的內容

把檔案內容放入變數，並向被選變數累加 1

把結果寫入 "poll_result.txt" 檔案

輸出圖形化的投票結果

文字檔

文字檔（poll_result.txt）中儲存來自投票程式的資料。

它儲存的資料如下所示：

3||4

第一個數字表示 "Yes" 的投票數，第二個數字表示 "No" 的投票數。

注釋：請記得只允許您的 Web 服務器來編輯該文字檔。不要讓其他人獲得訪問權，除了 Web 服務器 (PHP)。

本篇示範了投票的效果，更多的學習資料清關注php中文網即可觀看。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More