PHP combined with Ajax to implement voting function-PHP Tutorial-php.cn

PHP combined with Ajax to implement voting function

墨辰丷

Release： 2023-03-30 11:36:02

Original

1247 people have browsed it

This article mainly introduces PHP combined with Ajax to implement the voting function. Interested friends can refer to it. I hope it will be helpful to everyone.

In this AJAX example, we will demonstrate a voting program, and the results can be obtained without reloading the web page.

This example includes four elements:

① HTML form
② JavaScript
③ PHP page
④ Text file to store the results

1. HTML form

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

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<p 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>
</p>
</body>
</html>

Copy after login

Example explanation - HTML form

As you can see, the above HTML page contains a simple HTML form , which has a

element with two radio buttons.

The form works like this:

1. When the user selects "yes" or "no", an event will be triggered
2. When the event is triggered, the getVote() function will be executed
3. Surrounding the form is a

named "poll". When data is returned from the getVote() function, the returned data replaces the form.

2. Text file

The text file (poll_result.txt) stores data from the voting program.

It looks like this:

0||0
The first number represents a "Yes" vote, and the second number represents a "No" vote.

Note: Remember to allow only your web server to edit this text file. Don't let anyone else gain access except the web server (PHP).

3. JavaScript

JavaScript code is stored in "poll.js" and connected to the 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
}

Copy after login

Example Explanation: The

stateChanged() and GetXmlHttpObject functions are the same as the examples in the PHP and AJAX requests section.

getVote() function

This function is executed when the user selects "yes" or "no" in the HTML form.

1. Define the url (file name) sent to the server
2. Add parameters (vote) to the url with the content of the input field
3. Add a random number to Prevent the server from using cached files
4. Call the GetXmlHttpObject function to create an XMLHTTP object and tell the object to execute the stateChanged function when a change is triggered
5. Use the given url to open the XMLHTTP object
6. Send an HTTP request to the server

4. PHP page

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

<?php
$vote = $_REQUEST[&#39;vote&#39;];
//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=&#39;<?php echo(100*round($yes/($no+$yes),2)); ?>&#39;
height=&#39;20&#39;>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width=&#39;<?php echo(100*round($no/($no+$yes),2)); ?>&#39;
height=&#39;20&#39;>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Copy after login

Example explanation:

The selected value is passed from JavaScript, and then what happens:

1. Get the "poll_result.txt" file The content of

Summary
: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

php to implement the check-in function (case)

How to obtain the WeChat public account article page

How to obtain historical messages from WeChat public accounts

The above is the detailed content of PHP combined with Ajax to implement voting function. For more information, please follow other related articles on the PHP Chinese website!