PHP 예제 - AJAX 설문조사

PHP 예제 - AJAX Voting

AJAX Voting

다음 예제에서는 투표 결과가 웹에 표시되지 않는 투표 프로그램을 보여드리겠습니다. 페이지를 새로 고치면 표시됩니다.

QQ图片20161010104701.png

예제 설명 - HTML 페이지

사용자가 위 옵션 중 하나를 선택하면 "getVote()"라는 함수가 실행됩니다. 이 함수는 "onclick" 이벤트에 의해 트리거됩니다.

poll.html 파일 코드는 다음과 같습니다.

<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
function getVote(int) {
  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 执行代码
    xmlhttp=new XMLHttpRequest();
  } else {
    // IE6, IE5 执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("poll").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","poll_vote.php?vote="+int,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>你喜欢 PHP 和 AJAX 吗?</h3>
<form>
是:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>否:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

getVote() 함수는 다음 단계를 수행합니다.

XMLHttpRequest 객체 생성

생성 서버 응답이 준비되었습니다. 함수가 실행되었습니다.

서버에 있는 파일에 요청을 보냅니다

URL 끝에 추가된 매개변수(q)에 유의하세요(드롭의 내용 포함). 다운 목록)

PHP 파일

위에서 JavaScript를 통해 호출되는 서버 페이지는 "poll_vote.php"라는 이름의 PHP 파일입니다.

<?php
$vote = htmlspecialchars($_REQUEST['vote']);
// 获取文件中存储的数据
$filename = "poll_result.txt";
$content = file($filename);
// 将数据分割到数组中
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
  $yes = $yes + 1;
}
if ($vote == 1)
{
  $no = $no + 1;
}
// 插入投票数据
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>结果:</h2>
<table>
  <tr>
  <td>是:</td>
  <td>
  <span style="display: inline-block; background-color:green;
      width:<?php echo(100*round($yes/($no+$yes),2)); ?>px;
      height:20px;" ></span>
  <?php echo(100*round($yes/($no+$yes),2)); ?>%
  </td>
  </tr>
  <tr>
  <td>否:</td>
  <td>
  <span style="display: inline-block; background-color:red;
      width:<?php echo(100*round($no/($no+$yes),2)); ?>px;
      height:20px;"></span>
  <?php echo(100*round($no/($no+$yes),2)); ?>%
  </td>
  </tr>
</table>

선택한 값이 JavaScript에서 전송되는 경우

"poll_result.txt" 파일의 내용을 가져옵니다

파일 내용을 변수에 넣고 선택한 변수에 1을 추가합니다

"poll_result.txt" 파일에 결과 쓰기

그래픽 투표 결과 출력

텍스트 파일

투표 프로그램의 데이터는 텍스트 파일( poll_result.txt).

저장되는 데이터는 다음과 같습니다.

3||4

첫 번째 숫자는 "예"에 대한 투표 수를 나타내고 두 번째 숫자는 "반대" 투표 수를 나타냅니다.

참고: 웹 서버만 이 텍스트 파일을 편집할 수 있도록 허용해야 합니다. 웹 서버(PHP) 외에는 다른 사람이 액세스하도록 허용하지 마세요.

지속적인 학습

새로운 파일

<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function getVote(int) { if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("poll").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","poll_vote.php?vote="+int,true); xmlhttp.send(); } </script> </head> <body> <div id="poll"> <h3>你喜欢 PHP 和 AJAX 吗?</h3> <form> 是: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> <br>否: <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> </form> </div> </body> </html>

제출하다 코드 재설정

자동운전