PHP와 Ajax를 결합하여 투표 기능 구현
- 墨辰丷원래의
- 2018-06-07 10:53:341204검색
이 글은 주로 Ajax와 결합된 PHP를 사용하여 투표 기능을 구현하는 방법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
이 AJAX 예제에서는 웹페이지를 다시 로드하지 않고도 결과를 얻을 수 있도록 투표 프로그램을 시연해 보겠습니다.
이 예제에는 네 가지 요소가 포함됩니다.
1 HTML 양식
2 JavaScript
3 PHP 페이지
4 결과를 저장할 텍스트 파일
1. HTML 양식
이것은 HTML 페이지입니다. 여기에는 간단한 HTML 양식과 JavaScript 파일에 대한 연결이 포함되어 있습니다.
<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>
예시 설명 - HTML 양식
보시다시피 위 HTML 페이지에는 두 개의 라디오 버튼이 있는 e388a4556c0f65e1904146cc1a846bee 요소가 있는 간단한 HTML 양식이 포함되어 있습니다. .
양식은 다음과 같이 작동합니다.
1. 사용자가 "예" 또는 "아니오"를 선택하면 이벤트가 트리거됩니다.
2. 이벤트가 트리거되면 getVote() 함수가 실행됩니다.
3. form은 e388a4556c0f65e1904146cc1a846bee의 "poll"이라는 메시지입니다. getVote() 함수에서 데이터가 반환되면 반환된 데이터가 양식을 대체합니다.
2. 텍스트 파일
텍스트 파일(poll_result.txt)은 투표 프로그램의 데이터를 저장합니다.
다음과 같습니다:
0||0
첫 번째 숫자는 "찬성" 투표를 나타내고 두 번째 숫자는 "아니요" 투표를 나타냅니다.
참고: 웹 서버에서만 이 텍스트 파일을 편집할 수 있도록 허용해야 합니다. 웹 서버(PHP) 외에는 다른 사람이 액세스하도록 허용하지 마세요.
3. 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 형식에서 사용자가 "예" 또는 "아니요"를 선택하면 실행됩니다.
1. 서버로 전송되는 URL(파일 이름)을 정의합니다.
2. 입력 필드의 내용으로 URL에 매개변수(투표)를 추가합니다.
3. 서버가 캐시된 파일을 사용하지 못하도록 하려면 임의의 숫자를 추가합니다. . GetXmlHttpObject 함수를 호출하여 XMLHTTP 개체를 생성하고 변경 사항이 트리거될 때 개체에 stateChanged 함수를 실행하도록 지시합니다.
5. 제공된 URL을 사용하여 XMLHTTP 개체를 엽니다.
6. 서버에 HTTP 요청을 보냅니다. 4. 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>
선택한 값이 JavaScript에서 전달된 다음 발생합니다. 1 "poll_result.txt" 파일의 내용을 가져오고
2. 선택한 변수에 13. 결과를 "poll_result.txt" 파일에 씁니다
4. 그래픽 투표 결과를 출력합니다
요약
위 내용이 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 됩니다.
관련 권장사항:
PHP 체크인 기능 구현(케이스)
위 내용은 PHP와 Ajax를 결합하여 투표 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!