Php+ajax method of realizing voting function _php example

Source: Internet
Author: User
Tags html form

This article illustrates the method of Php+ajax to realize voting function. Share to everyone for your reference. Specifically as follows:

In this AJAX example, we'll show you a voting program where the Web page can get results without reloading.

This example includes four elements:

①html form
②javascript
③php page
④ a text file that holds results

One, HTML form

This is an HTML page. It contains a simple HTML form, and a connection to a JavaScript file:

 
 

Example explanation-HTML form

As you can see, the HTML page above contains a simple HTML form with a <div> element with two radio buttons.

The form works like this:

1. When the user selects "yes" or "no", an event is triggered
2. When the event is triggered, execute the getvote () function
3. Around the form is a <div> named "poll". When data is returned from the Getvote () function, the returned data replaces the form.

Second, text documents

Data from the polling program is stored in a text file (Poll_result.txt).

It resembles this:

0| | 0
The first number means "Yes" and the second number means "No" vote.

Note: Remember to allow only your Web server to edit the text file. Do not allow other people to gain access except the Web server (PHP).

Third, JavaScript

JavaScript code is stored in "Poll.js" and is connected to an HTML document:

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
}

Example Explanation:

The statechanged () and Getxmlhttpobject functions are the same as the examples in the PHP and AJAX requests section.

Getvote () function

The function executes when the user selects "yes" or "no" in the HTML form.

1. Define the URL to send to the server (filename)
2. Add a parameter (vote) to the URL with the input field in the parameter
3. Add a random number to prevent the server from using cached files
4. Call the Getxmlhttpobject function to create the XMLHTTP object and tell the object to execute the StateChanged function when a change is triggered
5. Open the XMLHTTP object with the given URL
6. Send HTTP requests to the server

Four, PHP page

The server page called by JavaScript code is a simple php file called "poll_vote.php."

 <?php $vote = $_request[' vote '];//get content of textfile $filename = "Poll_result.tx
T ";
$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);?> 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.