评级脚本在多种费率时不会更新

Question

Hi i am currently making a rating script and i have a few problems

Right now the script "kinda" works -> http://xch07.wi2.sde.dk/sandbox/rating2/index.php

The problem is that if i open up 2 browsers and load image 1 on both browsers and rate the image on both the browsers the last query sent will override anything inbetween so basically in the end only 1 vote out of the 2 is submitted?. Right now my db looks like this: id - votes - rating

Currently i just increment the votes with 1 when a vote is submitted And i raise the raiting with whatever value has ben voted

Could someone tell what i have to do to overcove this problem? and any other thoughs on my code are greatly appreciated :)

OBS: Does anyone have an idea of how i can check if a person has already voted a given image?

HTML

<div class="flex">
    <div class="imageWrapper mauto relative fadeInClass">
        <img id="imgSrc" src="assets/img/<?php echo $id ?>.png" class="carImg">

        <input id="imgValue" class="absolute displayn" type="radio" value="<?php echo $id ?>">
        <input id="imgVotes" class="absolute displayn" type="radio" value="<?php echo $votes ?>">
        <input id="imgRating" class="absolute displayn" type="radio" value="<?php echo $rating ?>">

        <form action="" method="post" class="flex flex-drr absolute bot0 left0">
            <input id="vote5" class="vote displayn" type="radio" name="vote" value="5">
            <label for="vote5"></label>

            <input id="vote4" class="vote displayn" type="radio" name="vote" value="4">
            <label for="vote4"></label>

            <input id="vote3" class="vote displayn"  type="radio" name="vote" value="3">
            <label for="vote3"></label>

            <input id="vote2" class="vote displayn" type="radio" name="vote" value="2">
            <label for="vote2"></label>

            <input id="vote1" class="vote displayn" type="radio" name="vote" value="1">
            <label for="vote1"></label>

            <input type="submit" id="voteSubmit" class="displayn">
        </form>
    </div>
</div>

Javascript/Ajax

var vote = document.getElementsByClassName('vote');
var voteL = vote.length;

for (let i = 0; i < voteL; i++) {
    vote[i].addEventListener('click', function () {

        let imgValue = document.getElementById("imgValue");
        let imgVotes = document.getElementById("imgVotes");
        let imgRating = document.getElementById("imgRating");

        let imgValueVal = imgValue.value;
        let imgVotesVal = imgVotes.value;
        let imgRatingVal = imgRating.value;

        let voteValue = vote[i].value;

        newImage(imgValueVal, imgVotesVal, imgRatingVal, voteValue);
    });
}

function newImage(id, votes, rating, voteValue) {
    var http = new XMLHttpRequest();
    var url = "pages/newImage.php";
    var params = "id=" + id + "&votes=" + votes + "&rating=" + rating + "&voteValue=" + voteValue;
    http.open("POST", url, true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange = function () {//Call a function when the state changes.
        if (http.readyState == 4 && http.status == 200) {
            alert(http.responseText);

            var Data = JSON.parse(this.responseText);
            alert(Data.id);

            let imgSrc = document.getElementById('imgSrc');
            imgSrc.src = Data.imgSrc;

            let imgValue = document.getElementById('imgValue');
            imgValue.value = Data.id;

            let imgVotes = document.getElementById('imgVotes');
            imgVotes.value = Data.votes;
            console.log(Data.votes);

            let imgRating = document.getElementById('imgRating');
            imgRating.value = Data.rating;

        }
    }
    http.send(params);
}

THE PAGE AJAX REQUESTS

<?php

require_once '../includes/db.php';
require_once '../includes/functions.php';
$dbCon = dbCon();


//UPDATERE DATABASED
$id = $_POST['id'];
$votes = $_POST['votes'];
$rating = $_POST['rating'];
$voteValue = $_POST['voteValue'];

$votes++;
$rating = $rating + $voteValue;

$stmt = $dbCon->prepare("UPDATE rating SET
    votes = ?,
    rating = ? WHERE id = " . $id);
$stmt->bind_param('ii', $votes, $rating);
$stmt->execute();


//SENDER NY QUERY AFSTED
define("SQL", "SELECT * FROM rating ORDER BY rand() LIMIT 1");
$result = $dbCon->query(SQL);
$result = $result->fetch_object();

$id = $result->id;
$votes = $result->votes;
$rating = $result->rating;


$imgSrc = "assets/img/" . $id . ".png";
$arr = array('imgSrc' => $imgSrc, 'id' => $id, 'votes' => $votes, 'rating' => $rating);

echo json_encode($arr);

Answer 1

Why don't you replace the prepared statement with the following:

$stmt = $dbCon->prepare("UPDATE rating SET
    votes = ?,
    rating = rating + ? WHERE id = " . $id);

Held og lykke :-)

Answer 2

Just amend your query to add 1 to what is currently in the column like this

$stmt = $dbCon->prepare("UPDATE rating 
                            SET votes = votes + 1,
                                rating = rating + ?
                        WHERE id = ?");
$stmt->bind_param('ii', $_POST['voteValue'], $_POST['id']);

Answer 3

By submitting the current rating/votes to your PHP script, you open yourself up to potentially updating your database based on stale information. You can UPDATE values in the database based on current row values, so the following would work as well:

$stmt = $dbCon->prepare("UPDATE rating SET votes = votes + 1, rating = rating + ? WHERE id = ?");
$stmt->bind_param('ii', $_POST['voteValue'], $_POST['id']);
$stmt->execute();