AJAX 투표에 대한 데모

jacklove원래의: 2018-05-07 15:12:371424검색

웹 페이지를 새로 고치지 않고도 투표 결과를 표시하는 투표 프로그램을 시연합니다. 이 기사에서는 투표의 효과를 보여줍니다.

예제 설명 - HTML 페이지

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

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

<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</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[&#39;vote&#39;]);// 获取文件中存储的数据$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에서 PHP 파일로 전송되면 다음과 같은 일이 발생합니다.

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

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

결과 쓰기" poll_result.txt" 파일

그래픽 투표 결과 출력

텍스트 파일

텍스트 파일(poll_result.txt)은 투표 프로그램의 데이터를 저장합니다.

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

3||4

첫 번째 숫자는 "예"에 대한 득표 수를 나타내고, 두 번째 숫자는 "아니요"에 대한 득표 수를 나타냅니다.

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

이 기사는 투표의 효과를 보여줍니다. 더 많은 학습 자료를 보려면 PHP 중국어 웹사이트를 팔로우하세요.

AJAX 투표에 대한 데모

관련 기사