Javascript 如何建立一个安全的图片投票系统

我正在尝试在网站上建立一个页面，用户可以在其中看到一系列图片。其目的是单个注册用户可以选择1张（且仅一张）图片作为其最喜爱的图片。一旦用户这样做，相应图片的分数将增加1。得票最多的图片将自动选择为主页的显示图片。如果用户已经为一张图片投票，并尝试为另一张图片投票，则他/她的投票将被转移到新图片，从而在该过程中降低旧图片的分数并增加新图片的分数。用户不能为自己上传的图片投票

基本上，我已经实现了这些功能。当用户单击页面上的按钮时，会触发AJAX调用。这个AJAX将数据发送到php页面。此php页面将处理输入、执行必要的SQL查询并更新页面。所有这些都是异步完成的。代码如下所示

下面是一些php代码，为每张图片生成按钮

<?php
   echo '<br><button id="Upvote'.$picid.'" onclick="upvote('.$picid.')" 
   class="w3-btn w3-red">Remove Vote</button>';
?>

下面是AJAX代码。（“refresh（）”用于异步重新加载每张图片的分数。这并不重要。）：

功能投票（照片）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
刷新（）；
}
}
xmlhttp.open（“GET”、“changescore.php？photoID=“+photo+”&page=“+++”&userID=“+”，true）；
xmlhttp.send（）；
}

下面是“changescore.php”文件：

---

您无法阻止人们试图篡改发送的数据，因此任何验证都必须在后端进行

但特别是关于接收多个ID的脚本，每次DOM必须在
onclick
处理程序上呈现时，它都会将其保存为事件。因此，加载原始文档时，会添加初始的
upvote（1）
。如果随后手动更改参数，浏览器会再次处理
onclick
，注意到它不同，并添加另一个事件处理程序，但不会删除第一个事件处理程序。如果要停止浏览器发送多个请求，可以执行以下操作：

echo '<br><button id="Upvote'.$picid.'" onclick="upvote(this)" data-id="'.$picid.'"
   class="w3-btn w3-red">Remove Vote</button>';

echo'
删除投票'；


功能上表决（元素）{
//……不管怎样。。。
log（element.dataset.id）；
}

或者更好的方法是，不要使用
onclick
，而是使用
addEventListener（）
在脚本中设置事件侦听器。如果没有，其中包括
changescore.php
文件的相关部分。您是否使用任何类型的本地存储，如会话、cookie等？否。仅MySQL上的存储。我将很快上传changescore.php文件。我将尝试此解决方案。当然，呈现问题是否只与onclick处理程序有关？其他处理程序会发生这种情况吗？
<?php
$disablevote = 0;
$reducevoteid = 0;

$page = $_GET['page'];
$userID = $_GET['userID'];
$photoID = $_GET['photoID'];

$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "user";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT ident FROM vote".$userID." WHERE page = '".$page."'";
//this SQL gets the picid the user last voted for, if any.

if ($result = $conn->query($sql)){
    while($row = $result->fetch_assoc()){
        $reducevoteid = $row['ident'];
        if ($row['ident']==$photoID){
            $disablevote = 1;
            //this happens if the button pressed on the page has the same id as the one the user last voted for.
        }
    }
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

$servername = "localhost";
$username = "root";
$password = "password";
$dbname = $page;

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$conn->close();

if ($disablevote == 0){//i.e. if the pressed button corresponds to a picture which the user didn't vote for yet.
    $servername = "localhost";
    $username = "root";
    $password = "password";
    $dbname = $page;

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

    $sql = "SELECT upvote, userid FROM ".$page." WHERE id=".$photoID;
    //This gets the score of the photo which the user voted for.

    if ($result = $conn->query($sql)){
        while($row = $result->fetch_assoc()){
            $scoreNumber = $row['upvote'];
            $userphoto = $row['userid'];
        }
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    if ($userphoto!=$userID){//i.e. if the photo was not uploaded by the user trying to vote.
        $scoreNumber++;
    }
    else {
        $disablevote = 1;
    }

    if ($disablevote == 0){
        $sql = "UPDATE ".$page." SET upvote = ".$scoreNumber." WHERE id=".$photoID;//changes the score of the picture.

        if ($conn->query($sql) === TRUE) {
            echo "New record created successfully";
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
        if ($reducevoteid != 0){//i.e. if the user has previously voted to another picture.
            $sql = "SELECT upvote FROM ".$page." WHERE id=".$reducevoteid;

            if ($result = $conn->query($sql)){
                while($row = $result->fetch_assoc()){
                    $scoreNumber = $row['upvote'];
                }
            } else {
                echo "Error: " . $sql . "<br>" . $conn->error;
            }

            $scoreNumber--;

            $sql = "UPDATE ".$page." SET upvote = ".$scoreNumber." WHERE id=".$reducevoteid;

            if ($conn->query($sql) === TRUE) {
                echo "New record created successfully";
            } else {
                echo "Error: " . $sql . "<br>" . $conn->error;
            }
        }
    }

    $conn->close();

    if ($disablevote == 0){
        $deleterecord = 0;
        $servername = "localhost";
        $username = "root";
        $password = "password";
        $dbname = "user";

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "SELECT * FROM vote".$userID." WHERE page = '".$page."'";

        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            $deleterecord = 1;//this happens if the user has already voted for a picture previously.
        }

        if ($deleterecord == 1){
            $sql = "DELETE FROM vote".$userID." WHERE page = '".$page."'";

            if ($conn->query($sql) === TRUE) {
                echo "Record deleted successfully";
            } else {
                echo "Error: " . $sql . "<br>" . $conn->error;
            }
        }

        $sql = "INSERT INTO vote".$userID." (page, ident) VALUES ('".$page."', '".$photoID."')";//inserts the new photo id to which the user voted.

        if ($conn->query($sql) === TRUE) {
            echo "Record created successfully";
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }

        $conn->close();

    }
}
else {//in this instance, the pressed button corresponds to a picture which the user did vote. This function will simply remove the vote from the picture.
    $disablevote = 0;
    $servername = "localhost";
    $username = "root";
    $password = "password";
    $dbname = $page;

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

    $sql = "SELECT upvote, userid FROM ".$page." WHERE id=".$photoID;

    if ($result = $conn->query($sql)){
        while($row = $result->fetch_assoc()){
            $scoreNumber = $row['upvote'];
            $userphoto = $row['userid'];
        }
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    if ($userphoto!=$userID){//doublechecking that a user didn't try to vote for his own uploads.
        $scoreNumber--;
    }
    else {
        $disablevote = 1;
    }

    if ($disablevote == 0){
        $sql = "UPDATE ".$page." SET upvote = ".$scoreNumber." WHERE id=".$photoID;

        if ($conn->query($sql) === TRUE) {
            echo "New record created successfully";
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
    }

    $conn->close();

    if ($disablevote == 0){
        $deleterecord = 0;
        $servername = "localhost";
        $username = "root";
        $password = "password";
        $dbname = "user";

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "SELECT * FROM vote".$userID." WHERE page = '".$page."'";

        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            $deleterecord = 1;
        }

        if ($deleterecord == 1){
            $sql = "DELETE FROM vote".$userID." WHERE page = '".$page."'";

            if ($conn->query($sql) === TRUE) {
                echo "Record deleted successfully";
            } else {
                echo "Error: " . $sql . "<br>" . $conn->error;
            }
        }

        $conn->close();

    }
}
?>

echo '<br><button id="Upvote'.$picid.'" onclick="upvote(this)" data-id="'.$picid.'"
   class="w3-btn w3-red">Remove Vote</button>';

<script>
function upvote(element){
    //...whatever...
    console.log(element.dataset.id);
}
</script>