Home>

In this ajax example, we will demonstrate a voting process,Without reloading the web page,You can get results.

This example includes four elements:

① html form

② javascript

③ php page

④ Text file for storing results

I. html form

This is the html page. It contains a simple html form and a connection to a javascript file:

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

Example explanation-html form

As you can see,The html page above contains a simple html form with a

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 getvote () function

3. Surrounding the form is a

named "poll". When data is returned from the getvote () function,The returned data will replace the form.

Text files

A text file (poll_result.txt) stores data from the voting process.

It looks like this:

0 || 0

The first number means "yes" to vote, and the second number means "no" to vote.

Note:Remember to allow only your web server to edit the text file.Don't let others gain access,Except for web server (php).

Third, javascript

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

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) to send to the server

2. Add a parameter (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 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 request to the server

Fourth, the php page

The server page called by the javascript code is a simple php file named "poll_vote.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>

Example explanation:

The selected value is passed from javascript and then it happens:

1. Get the contents of the "poll_result.txt" file

2. Put the contents of the file into variables,And add 1 to the selected variable

3. Write the result to "poll_result.txt" file

4. Output graphical voting results

php

Related articles

  • Previous Practical bank transfer stored procedures and serial number generation stored procedures
  • Next Calling WebService synchronously and asynchronously