< …">

Octopress 部落格

一個靜態網站的部落格框架

Ajax Poll 投票範例

這是一個 AJAX Poll 投票的範例 1. HTML Code(ajax_poll.htm): 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
  <head>
    <meta charset="utf-8" />
    <title>AJAX Poll</title>
    <script src="ajax_poll.js"></script> 
  </head>
  <body>
    <h3><a href="http://www.w3schools.com/php/php_ajax_poll.asp">AJAX Poll</a></h3>
    <div id="poll">
      <h2>Do you like PHP and AJAX so far?</h2>
      <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>
    <a href="index.htm">Home</a>
  </body>
</html>
2. Javascript Code(ajax_poll.js): 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var xmlHttp;

function getVote(int) {
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null) {
    alert("Browser does not support HTTP Request");
    return;
  }
  var url="ajax_poll.php";
  url=url+"?vote="+int;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

function stateChanged() {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    document.getElementById("poll").innerHTML=xmlHttp.responseText;
  }
}

function GetXmlHttpObject() {
  var objXMLHttp=null;
  if (window.XMLHttpRequest) {
    objXMLHttp=new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return objXMLHttp;
}
3. PHP Code(ajax_poll.php): 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php

$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "ajax_poll.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="images/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="images/poll.gif" width='<?php echo(100*round($no/($no+$yes),2)); ?>' height='20'>
      <?php echo(100*round($no/($no+$yes),2)); ?>%
    </td>
  </tr>
</table>
4. TXT Code(ajax_poll.txt): 
1

0||0
5. 下載 poll.gif 檔案, 放到 images 資料夾下. 6. 寫好後, 執行 ajax_poll.htm, 完成!