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

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 :-)