PHP+AJAX實現投票功能的方法

2024-05-04 23:39:19

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了PHP+AJAX實現投票功能的方法,以完整實例形式分析了php結合Ajax實現投票功能的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了PHP+AJAX實現投票功能的方法。分享給大家供大家參考。具體如下：

在這個 AJAX 實例中，我們將演示一個投票程序，網頁在不重新加載的情況下，就可以獲得結果。

本例包括四個元素：

① HTML 表單

② JavaScript

③ PHP 頁面

④ 存放結果的文本文件

一、HTML 表單

這是 HTML 頁面。它包含一個簡單的 HTML 表單，以及一個與 JavaScript 文件的連接：

<html>

<head>

<script src="poll.js"></script>

</head>

<body>

<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>

</body>

</html>

例子解釋 - HTML 表單

正如您看到的，上面的 HTML 頁面包含一個簡單的 HTML 表單，其中的

元素帶有兩個單選按鈕。

表單這樣工作：

1. 當用戶選擇 "yes" 或 "no" 時，會觸發一個事件

2. 當事件觸發時，執行 getVote() 函數

3. 圍繞該表單的是名為 "poll" 的

。當數據從 getVote() 函數返回時，返回的數據會替代該表單。

二、文本文件

文本文件 (poll_result.txt) 中存儲來自投票程序的數據。

它類似這樣：

0||0

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

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

三、JavaScript

JavaScript 代碼存儲在 "poll.js" 中，并于 HTML 文檔相連接：

var xmlHttp

function getVote(int)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="poll_vote.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

}

例子解釋：

stateChanged() 和 GetXmlHttpObject 函數與 PHP 和 AJAX 請求這一節中的例子相同。

getVote() 函數

當用戶在 HTML 表單中選擇 "yes" 或 "no" 時，該函數就會執行。

1. 定義發送到服務器的 url (文件名)

2. 向 url 添加參數 (vote)，參數中帶有輸入字段的內容

3. 添加一個隨機數，以防止服務器使用緩存的文件

4. 調用 GetXmlHttpObject 函數來創建 XMLHTTP 對象，并告知該對象當觸發一個變化時執行 stateChanged 函數

5. 用給定的 url 來打開 XMLHTTP 對象

6. 向服務器發送 HTTP 請求

四、PHP頁面

由 JavaScript 代碼調用的服務器頁面是名為 "poll_vote.php" 的一個簡單的 PHP 文件。

<?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>