Question

当我自动选择投票时，我想要更新一个费率系统。但它没有运行......我必须做＆＃34; F5＆＃34; ..我证明了把一个location.reload（）;但是我第一次点击，它没有运行，第二次运行！问题是页面上的计数器和我的数据库上的另一个计数器之间存在一次单击的差异

$(function(){
    $('.star').on('mouseover', function(){
        var indice = $('.star').index(this);
        $('.star').removeClass('full');
        for(var i = 0; i<= indice; i++){
            $('.star:eq('+i+')').addClass('full');  
        }
    }); 

    $('.star').on('mouseout', function(){
        $('.star').removeClass('full');
        });

    var average = $('.average').attr('data-average');
    function avaliacao(average){
        average = (Number(average)*20);
        $('.barra .bg').css('width', 0);
        $('.barra .bg').animate({width: average+'%'}, 500);
    }
    avaliacao(average);

    $('.star').on('click', function(){
        var artigoId = $('.artigoDados').attr('data-id');
        var ponto = $(this).attr('id');
        $.post('sys/votar.php',{votar: 'sim', artigo: artigoId, ponto: ponto}, function(retorno){
        avaliacao(retorno.average);
        $('p.votos span').html(retorno.votos);

        }, 'jSON');

    });

});

HTML

    <?php 

    $bdd = new PDO('mysql:host=localhost;dbname=notation', 'root', 'root');

    ?>

    <html lang="pt-BR">
    <head>
    <meta charset="utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/note.js"></script>
    </head>

    <body>

    <?php
        $artigoId = (int)$_GET['artigo'];

        $artigos = $bdd->prepare('SELECT * FROM sys_note WHERE id_recette = ?');
        $artigos->execute(array($artigoId));
        while($row = $artigos->fetchObject()){
        echo '<h1>'.$row->titre_recette.'</h1>';
        $calculo = ($row->pontos == 0) ? 0 : round(($row->pontos/$row->votos), 1);
        echo '<span class="average" data-average="'.$calculo.'"></span>';
        echo '<span class="artigoDados" data-id="'.$row->id_recette.'"></span>';

    ?>

    <div class="barra">
        <span class="bg"></span>
        <div class="estrelas">
        <?php for($i=1; $i<=5; $i++): ?>
        <span class ="star" id="<?php echo $i;?>">
        <span class="starAbsolute"></span>
        </span>
        <?php endfor;?>
        </div>
    </div>
    <p class="votos"><span><?php echo $row->votos;?></span>votes</p>
    <?php }?>

    </body>
    </html>

votar.php

<?php 

$bdd = new PDO('mysql:host=localhost;dbname=notation', 'root', 'root');

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $artigo = (int)$_POST['artigo'];    
    $pontos = $_POST['ponto'];

    $pegaArtigo = $bdd->prepare('SELECT * FROM sys_note WHERE id_recette = ?');
    $pegaArtigo->execute(array($artigo));

    while($row = $pegaArtigo->fetchObject()){
        $votosUpd = $row->votos+1;
        $pontosUpd = $row->pontos+$pontos;
        $average = round(($pontosUpd/$votosUpd), 1);
        $update = $bdd->prepare('UPDATE sys_note SET votos = ?, pontos = ? WHERE id_recette = ?');
        if($update->execute(array($votosUpd, $pontosUpd, $artigo))){
        die(json_encode(array('average' => $average, 'votos' => $votosUpd)));   

        }
    }
}

?>

Answer 1

不需要重新加载页面，您的脚本会自动更新html。一起删除重新加载

$('.star').on('click', function() {
  var artigoId = $('.artigoDados').attr('data-id');
  var ponto = $(this).attr('id');
  $.post('sys/votar.php', {
    votar: 'sim',
    artigo: artigoId,
    ponto: ponto
  }, function(retorno) {
    avaliacao(retorno.average);
    $('p.votos span').html(retorno.votos);

  }, 'jSON');
});

回应json结果

while($row = $pegaArtigo->fetchObject()){
    $votosUpd = $row->votos+1;
    $pontosUpd = $row->pontos+$pontos;
    $average = round(($pontosUpd/$votosUpd), 1);
    $update = $bdd->prepare('UPDATE sys_note SET votos = ?, pontos = ? WHERE id_recette = ?');
    if($update->execute(array($votosUpd, $pontosUpd, $artigo))){
        echo json_encode(array('average' => $average, 'votos' => $votosUpd));   

    }

}

使用location.reload（）更新费率系统的困难;

1 个答案: