고정 헤더 영역
상세 컨텐츠
본문
728x90
ajax_poll.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 투표 프로그램</title>
<script>
function getVote(int) {
const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax_poll.php?vote=" + int, true); // 요청 초기화 (요청방식 지정, 요청을 보낼 URL, 동기 여부(비동기))
xhr.send(); // 요청을 서버로 보냄
xhr.onload = function() { // onload = 서버로부터 응답이 도착했을 때 호출
console.log(this.status);
if (this.status == 200) {
document.querySelector("#poll").innerHTML = this.responseText; // 응답의 내용을 HTML요소에 삽입(innerHTML) id가 poll인 요소에 넣음, querySelector = 첫번째 HTML 요소를 선택함
}
}
}
</script>
</head>
<body>
<div id = "poll">
<h3>배고픈가요?</h3>
<form action="">
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)"><br>
</form>
</div>
</body>
</html>
ajax_poll.php
<?php
// $_GET 이 세팅되어 있던가, 비어있던가
$vote = (isset($_GET['vote']) && $_GET['vote'] !='') ? $_GET['vote'] : '';
// vote 매개변수가 비어 있으면 스크립트 종료
if($vote == '') {
exit;
}
$filename = 'data/ajax_poll.txt';
// 파일이 존재하지 않으면 파일을 생성하고 초기값 0,0 기록
if(!file_exists($filename)) {
file_put_contents($filename, "0,0");
}
$content = file_get_contents($filename);
// 파일의 내용을 읽어서 yes 와 no의 투표 수를 가져옴
// 가져온 내용을 , 기준으로 분리하여 투표 수를 각각의 변수에 할당
list($yes, $no) = explode(',', $content);
// 선택 시 1씩 증가
if($vote == 0 ) {
$yes = $yes + 1;
} elseif ($vote == 1) {
$no = $no + 1;
}
// 선택한 yes, no 저장
file_put_contents($filename, "$yes,$no");
// 백분율 나타내기 위한 코드 round = 반올림
$yes_width = round(($yes / ($yes + $no)) * 100);
$no_width = round(($no / ($yes + $no)) * 100);
?>
<h2>투표결과 : </h2>
<table>
<tr>
<td>예</td>
<td width="100"><img src="https://www.w3schools.com/php/poll.gif" height="20" width="<?=$yes_width?>%"></td>
<td><?=$yes_width ?>%</td>
</tr>
<tr>
<td>아니오</td>
<td><?=$no_width ?>%</td>
</tr>
</table>
'php' 카테고리의 다른 글
| PHP 부트스트랩 이용하여 로그인 구현 (0) | 2024.03.26 |
|---|---|
| PHP SQL 인젝션 공격 대비방법 (0) | 2024.03.26 |
| PHP+Ajax 이미지 파일 업로드 (0) | 2024.03.26 |
| PHP+Ajax+MySQLI(PDO) 아이디 중복체크 (0) | 2024.03.26 |
| PHP cURL 이용하여 JSON 데이터 가져와 활용 (0) | 2024.03.26 |
