PHP 和 AJAX 投票

AJAX 投票

在這個 AJAX 執行個體中，我們將示範一個投票程式，網頁在不重新載入的情況下，就可以獲得結果。

到目前為止，您喜歡 PHP 和 AJXA 嗎？ Yes:
No:

本例包括四個元素：

HTML 表單 JavaScript PHP 頁面 存放結果的文字檔

HTML 表單

這是 HTML 頁面。它包含一個簡單的 HTML 表單，以及一個與 JavaScript 檔案的串連：

 
Do you like PHP and AJAX so far?

例子解釋 - HTML 表單

正如您看到的，上面的 HTML 頁麵包含一個簡單的 HTML 表單，其中的 元素帶有兩個選項按鈕。

表單這樣工作：

當使用者選擇 "yes" 或 "no" 時，會觸發一個事件 當事件觸發時，執行 getVote() 函數 圍繞該表單的是名為 "poll" 的 。當資料從 getVote() 函數返回時，返回的資料會替代該表單。

文字檔

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

它類似這樣：

0||0

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

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

JavaScript

JavaScript 代碼儲存在 "poll.js" 中，並於 HTML 文檔相串連：

var xmlHttpfunction getVote(int){xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="poll_vote.php"url=url+"?vote="+inturl=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=nullif (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() }else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") }return objXMLHttp}

例子解釋：

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

getVote() 函數

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

定義發送到伺服器的 url （檔案名稱） 向 url 添加參數 (vote)，參數中帶有輸入欄位的內容 添加一個隨機數，以防止伺服器使用緩衝的檔案 調用 GetXmlHttpObject 函數來建立 XMLHTTP 對象，並告知該對象當觸發一個變化時執行 stateChanged 函數 用給定的 url 來開啟 XMLHTTP 對象 向伺服器發送 HTTP 要求

PHP 頁面

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

Result:
 

  

   

    
Yes:
    
'height='20'>%
   
   

    
No:
    
'height='20'>%
   
  
 

例子解釋：

所選的值從 JavaScript 傳來，然後會發生：

擷取 "poll_result.txt" 檔案的內容 把檔案內容放入變數，並向被選變數累加 1 把結果寫入 "poll_result.txt" 檔案 輸出圖形化的投票結果

