Голосование на AJAX своими руками

Сегодня немного отвлечемся от рефакторинга в пользу AJAX на Dojo. А конкретнее - напишем скрипт голосования, используя Dojo.

Наш скрипт будет спрашивать у посетителя, нравится ли ему блог. На это есть два варианта ответа - да и нет. После выбора варианта ответа и нажатия кнопки «Проголосовать» скрипт вместо формы голосования покажет его результаты. А при нажатии кнопки «Показать результаты» в форме голосования скрипт также на месте этой формы покажет результаты голосования. При этом для простоты результаты будем хранить в файле.

Вообще, наш скрипт голосования будет состоять из 2-х частей: клиентская и серверная. Клиентская часть (index.php) будет отвечать за взаимодействие с пользователем, а серверная (vote.php) - за считывание и запись результатов голосования.

Поехали:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<script type="text/javascript" src="dojo.js" djConfig="parseOnLoad:true, isDebug:false, usePlainJson:true"></script>
</head>
<body>
<!-- Голосование -->
<div id="voting">
	<form id="vote_form" method="post">
	Нравится блог?
	<br />
	<input type="radio" name="answer" value="yes" checked="checked" /> Да
	<input type="radio" name="answer" value="no" /> Нет
	<br />
	<input type="button" value="Проголосовать" id="vote_btn" />
	<br />
	<input type="button" value="Показать результаты" id="res_btn" />
	</form>
</div>
<!-- /Голосование -->
<!-- Dojo код -->
<script type="text/javascript">
	dojo.addOnLoad(function() {
		var vote_btn = dojo.byId("vote_btn");
		var res_btn  = dojo.byId("res_btn");
		var yes_answer   = 0;
		var no_answer    = 0;
		var just_results = true; // true, если пользователь нажал на кнопку "Показать результаты"
		dojo.connect(vote_btn, "onclick", function() {
			// Передаем форму PHP-скрипту
			dojo.xhrPost({
				url: "vote.php",
				content: {act: 'vote'},
				form: "vote_form",
				handleAs: "json",
				load: function(response, ioArgs) {
					yes_answer = response.yes_answer;
					no_answer  = response.no_answer;
					just_results = false;
					res_btn.click();
					return response;
				},
				error: function(response, ioArgs) {
					console.error("HTTP status code: ", ioArgs.xhr.status);
					return response;
				}
			});
		});
		dojo.connect(res_btn, "onclick", function() {
			if (just_results) {
				// Вызываем PHP-скрипт для извлечения результатов голосования
				dojo.xhrPost({
					url: "vote.php",
					handleAs: "json",
					load: function(response, ioArgs) {
						yes_answer = response.yes_answer;
						no_answer  = response.no_answer;
						show_vote_results(yes_answer, no_answer);
						return response;
					},
					error: function(response, ioArgs) {
						console.error("HTTP status code: ", ioArgs.xhr.status);
						return response;
					}
				});
			} else {
				show_vote_results(yes_answer, no_answer);
			}
		});
	});
	// Функция для вывода результатов голосований
	function show_vote_results(yes_answer, no_answer) {
		dojo.byId("voting").innerHTML = "Результаты голосования:<br />Да: " + yes_answer + "<br />Нет: " + no_answer;
	}
</script>
<!-- /Dojo код -->
</body>
</html>

vote.php

<?
	// Читаем результаты голосования из файла
	@$f = fopen('vote.dat', 'r');
	if ($f) {
		@$yes_answer = trim(fgets($f));
		@$no_answer  = trim(fgets($f));
		@fclose($f);
	}
	// Делаем инкремент варианта, если пользователь голосует
	if ($_REQUEST['act'] == 'vote') {
		if ($_REQUEST['answer'] == 'yes') {
			$yes_answer++;
		} elseif ($_REQUEST['answer'] == 'no') {
			$no_answer++;
		}
	}
	// Записываем результаты голосования в файл
	@$f = fopen('vote.dat', 'w');
	if ($f) {
		@flock($f, LOCK_EX);
		@fwrite($f, $yes_answer."\r\n");
		@fwrite($f, $no_answer);
		@flock($f, LOCK_UN);
		@fclose($f);
	}
	// Возвращаем результаты голосования в формате JSON
	echo "{'yes_answer': '".intval($yes_answer)."',
	       'no_answer': '".intval($no_answer)."'}";
?>

Эти файлы должны лежать в одной директории. И не забудьте положить туда dojo.js! Все, теперь наш скрипт готов к работе. Протестировать его можно тут, а скачать - здесь.

Удачи!

Теги: ajax, dojo

Читайте также:

5 Ответов на “Голосование на AJAX своими руками”

dobs

Круто! СПС
dobs

Кста еще б не отказался увидеть статейку о том как сделать вывод результатов голосования (типа прогресс бара)
Alexpts

Классно, а то стандартные плагины просто убивают. Насчет результатов, действительно, интересно
Саша

А если я хочу в каталог отдельный убрать файлы, куда путь прописать?
Рент

Было бы здорава увидеть дополнения, с функцией против накрутки. Которая не дает накручивать голосования.

От новичка до профессионала

Рубрики

Популярное

Последние записи

Голосование на AJAX своими руками

5 Ответов на “Голосование на AJAX своими руками”