Question

我使用jQuery AJAX和JSON创建了一个简单的[投票表单]。我想知道如何创建Cookie，以便用户不能多次投票。以下是我的代码。

我是Cookie和jQuery的新手。请告诉我如何完成我的任务。

的JavaScript

<script>
$(document).ready(function(){

    $("#poll").click(function(){
        var count = '';
        if (document.getElementById("vote1").checked) {
            count = 0;
        }
        if (document.getElementById("vote2").checked) {
            count = 1;
        }
        var jsonV= { "vote": count };

        $.ajax({
          type  : "POST",
          url   : "poll_vote.php",
          data  : jsonV,
          dataType: "json",
              success : function ( responseText ){
                console.log("Is working " + responseText);
                 $("#result").html( responseText.vote );
              },
              complete : function(){
                  $("#poll").slideUp();
              },
              error : function( error,responseText ){
                // alert("Server not Responding. Sorry for the inconvenience caused. Please Try again Later");
                console.log( error );
                $("#result").html( error + responseText );
                alert( count );
              }
        });
    });
});
</script>

PHP

<?php

$vote = $_REQUEST['vote'];
$filename = "poll_result.txt";
$content = file($filename);
// $decode = json_decode($encode);
$array = explode("||", $content[0]);
$male = $array[0];
$female = $array[1];

if ($vote == '0') {
  $male = $male + 1;
}
if ($vote == '1') {
  $female = $female + 1;
}

$insertvote = $male."||".$female;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);

$table =  (
    "<h2>Results:</h2>
        <table>
        <tr>
            <td> Male :</td>
            <td>
            <img src='poll.gif'
            width= ".(100*round($male/($female+$male),2)).
            "height='20'>".
            (100*round($male/($female+$male),2))." %"  .
            "
             </td>
         </tr>
         <tr>
             <td> Female :</td>
             <td>
             <img src='poll.gif'
             width=". (100*round($female/($female+$male),2)) .
            "
             height='20'>".
             (100*round($female/($female+$male),2))." %" ."

             </td>
         </tr>
     </table>"
 );
$list  = array('vote' => $table);
$encode = json_encode($list);
echo $encode;
?>

HTML

<div id= "poll">
    <h3> What is your Gender? </h3>
    <form>
        Male : 
        <input type ="radio" name ="vote"  id="vote1" >
        <br>
        Female :
        <input type ="radio" name ="vote"  id="vote2" >
    </form>
</div>

Answer 1

您可能希望在用户投票时设置Cookie，并在提交投票时在PHP中检查该Cookie。如果已经设置了cookie，则应该放弃投票。

例如，仅使用PHP，它看起来像这样：

if (!isset($_COOKIE['has_voted'])) {
    // normal vote submission code goes here
    // ...
    // then we set a cookie to expire in 30 days
    setcookie('has_voted', '1', mktime().time()+60*60*24*30);
} else {
    // cookie already exists, user has already voted on this machine
    // do not count the vote, flag an error to the user
}

值得注意的是，有这样的方法 - 用户可以轻松地手动删除cookie。在这种情况下，您还可以存储已经投票的用户的IP地址，但这可能会在共享计算机和网络后面的多台计算机上出现问题。

Answer 2

由于您似乎正在使用PHP，因此您将能够实施cookie以防止在现有脚本中进行多次投票。

在PHP中设置cookie的语法如下：

setcookie("cookiename", "cookiedata", cookietime, "cookielocation");

其中“cookiename”是cookie的名称，例如，“voteed”，“cookiedata”是存储在cookie中的数据 - 例如“是”。 “cookielocation”是cookie存储在用户浏览器缓存中的位置。除非你知道你在做什么，否则只需将其设置为“/".

Cookietime是Cookie在用户系统中保留的时间，直到浏览器自动删除它为止。请注意，这不会阻止用户删除cookie。为简单起见，我通常将时间设置如下：

time()+60*60*24*days

其中天是Cookie在用户系统中的持续时间（当然是几天）。

要检索cookie的值以便能够对其执行逻辑，请尝试使用：

if(isset($_COOKIE['cookiename'])) {
   $valueOfCookie = $_COOKIE['cookiename'];
}

在尝试检索值之前，请务必使用if(isset())确保已设置Cookie。

使用这些函数，当用户提交表单时，您的逻辑可能看起来像这样：

检查投票Cookie是否已设置
如果是，请打印错误消息，否则：
继续处理表单数据，并设置投票Cookie

然而，在旁注中，如果您担心用户可能会删除他们的Cookie以便他们再次投票，我可能会建议您存储用户的IP地址，而不是使用Cookie在服务器端，如果他们的IP地址已经投票，则拒绝他们进行投票访问。

Answer 3

您可以使用sessionStorage执行此操作，仅使用JS：

<script>
$(document).ready(function(){
    $("#poll").click(function(){
        var count = '';
        if (document.getElementById("vote1").checked) {
            count = 0;
        }
        if (document.getElementById("vote2").checked) {
            count = 1;
        }

        var jsonV= { "vote": count };

        if ( sessionStorage.getItem( 'voted' ) == 'true' ) {
            alert('You have already voted!');
        }else if ( sessionStorage.getItem( 'voted' ) == null ){
            $.ajax({
              type  : "POST",
              url   : "poll_vote.php",
              data  : jsonV,
              dataType: "json",
                  success : function ( responseText ){
                    console.log("It's working" + responseText);
                     $("#result").html( responseText.vote );
                  },
                  complete : function(){
                      $("#poll").slideUp();
                      sessionStorage.setItem('voted', 'true');
                  },
                  error : function( error,responseText ){
                    // alert("Server not Responding. Sorry for the inconvenience caused. Please Try again Later");
                    console.log( error );
                    $("#result").html( error + responseText );
                    alert( count );
                  }
            });
        }
    });
});
</script>

我在这里做的是添加一个会话存储项 complete回调你的ajax调用，所以一旦完成了项目'已投票'将被设置。
然后我将ajax调用包装在if条件下进行检查存储项的值，如果设置，则不允许你投票（而是提出一个alert）

注意您还可以localStorage，如果您希望项目持续更长时间，因为当浏览器窗口关闭时会清除sessionStorage，而localStorge会持续到用户清除其Cookie /浏览数据。

这里有一个小片段，您可以用它来清理存储空间以进行测试：

$('#clear').click(function(){
    console.log(sessionStorage.getItem( 'voted' ));
    sessionStorage.removeItem('voted');
    console.log(sessionStorage.getItem( 'voted' ));
});

您将需要随附的HTML：

<p id="clear">clear</p>

创建Cookie以便不在投票中再次投票

3 个答案: