Question

我目前有一个包含2列的数据库表：Photo No.＆amp;投票数。当我在html页面上按下相应的照片时，我想增加数据库中的投票数量。此外，我不想去另一个页面，因为按下照片时会有叠加内容。（因此表格标签中没有任何动作。

HTML

<form action="" method="post">
        <input id="box1" type="submit">
        <input id="result1" name="result1" type="text" value="0"/>
</form>

PHP

<?php
$link = mysqli_connect("localhost", "root", "", "votingcount");

// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}

 $sql = "UPDATE vote_result SET vote_count = vote_count + 1 WHERE photo_no=1";
if(mysqli_query($link, $sql)){
echo "Records added successfully.";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

// close connection
mysqli_close($link);
?>

运行php

$(function() {
        $('form').bind('submit', function(){
            $.ajax({
                type: 'post',
                url: "insert.php",
                data: $("form").serialize(),
                success: function() {
                }
            });
            return false;
        });
    });

我所做的只是允许在数据库中更新第一个照片vount计数。但我还有其他7张照片，我还想在点击相应的照片时更新各自的投票数。

Answer 1

这是否符合您的需求？

＆＃13;

var votes = [0, 0, 0];
$(document).ready(function() {
  $('.photoButton').click(function() {
    // Here, make you ajax call using photo_id
    ++votes[$(this).parent().attr('photo_id')];
    $(this).prev().text(votes[$(this).parent().attr('photo_id')]);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="#photo-gallery">
  <div class="photo" photo_id="0">
    <img src="http://lmsotfy.com/so.png" style="width:100px" />
    <span class="vote">0</span> <span class="photoButton">+</span>
  </div>
  <div class="photo" photo_id="1">
    <img src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px" />
    <span class="vote">0</span> <span class="photoButton">+</span>
  </div>
  <div class="photo" photo_id="2">
    <img src="https://www.stackoverflowbusiness.com/hubfs/logo-so-color.png?t=1484933198957" style="width:100px" />
    <span class="vote">0</span> <span class="photoButton">+</span>
  </div>
</div>

＆＃13;

使用ajax（这是一个想法，它没有经过适当的测试）：

$(function() {
    $('.photoButton').click(function(){
        $.ajax({
            type: 'post',
            url: "insert.php",
            data: {
                'photo_id' : $(this).parent().attr('photo_id')
            },
            success: function(data) {
                $(this).prev().text(data['vote']);
            }
        });
        return false;
    });
});

和PHP：

try {
    $sql->prepare("UPDATE vote_result SET vote_count = vote_count + 1 WHERE photo_no=:photo_id")
    ->bind('photo_id', $_GET['photo_id'])
    ->execute();
    echo json_encode(array('vote' => $sql->query('SELECT vote_count FROM vote_result WHERE photo_no=:photo_id')->bind('photo_id', $_GET['photo_id'])->fetch()->vote_count));
} catch(SqlException $e){
    // Deal with SQL errors or wrong IDs or ...
    // depending on how your sql wrapper works
}

正如我所说，这是极简主义，只是让它正常运作的想法。

编辑：您不应该直接使用mysqli_ *函数，更喜欢使用PDO或任何其他SQL包装器，并使用准备和/或绑定查询来阻止您的代码形式SQL injection

Answer 2

在图片点击时我们需要使用ajax进行更新

每个图像的data-id需要唯一

隐藏字段的id和图像data-id需要相同

<div>
 <img src="path/to/image" data-id="vote1"  class="vote"/>
 <input type="hidden" id="vote1" value="0">
</div>
 <div>
 <img src="path/to/image" data-id="vote2"  class="vote"/>
 <input type="hidden" id="vote2" value="1">
</div>

和juery

$(documnet).on('click', '.vote', function(){
 var imageId = $(this).attr("data-id");
 var voteCnt = $("#"+imageId).val()+1;
   $.post("process.php", { Photo:imageId, vote:voteCnt }
   function(data){
        //please use success or failure function
        $("#"+imageId).val(voteCnt);
        alert(data);
    });
});

更新没有HTML表单标记的数据库表，并从MySQL表中获取特定值并显示

2 个答案: