Голосование на AJAX своими руками
Сегодня немного отвлечемся от рефакторинга в пользу AJAX на Dojo. А конкретнее – напишем скрипт голосования, используя Dojo.
Наш скрипт будет спрашивать у посетителя, нравится ли ему блог. На это есть два варианта ответа – да и нет. После выбора варианта ответа и нажатия кнопки «Проголосовать» скрипт вместо формы голосования покажет его результаты. А при нажатии кнопки «Показать результаты» в форме голосования скрипт также на месте этой формы покажет результаты голосования. При этом для простоты результаты будем хранить в файле.
Вообще, наш скрипт голосования будет состоять из 2-х частей: клиентская и серверная. Клиентская часть (index.php) будет отвечать за взаимодействие с пользователем, а серверная (vote.php) – за считывание и запись результатов голосования.
Поехали:
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://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! Все, теперь наш скрипт готов к работе. Протестировать его можно тут, а скачать – здесь.
Удачи!
Октябрь 8th, 2008
Круто! СПС
Ноябрь 5th, 2008
Кста еще б не отказался увидеть статейку о том как сделать вывод результатов голосования (типа прогресс бара)
Январь 3rd, 2009
Классно, а то стандартные плагины просто убивают. Насчет результатов, действительно, интересно
Май 24th, 2009
А если я хочу в каталог отдельный убрать файлы, куда путь прописать?
Апрель 15th, 2010
Было бы здорава увидеть дополнения, с функцией против накрутки. Которая не дает накручивать голосования.