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

【问题标题】：Update database table without HTML form tag and get a specific value from MySQL table and display更新没有 HTML 表单标签的数据库表并从 MySQL 表中获取特定值并显示
【发布时间】：2017-06-24 14:27:12
【问题描述】：

我目前有一个包含 2 列的数据库表：照片编号和投票计数。当在 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 张其他照片，我还想在点击相应照片时更新相应的投票数。

【问题讨论】：

您应该使用 ajax 来执行此操作。有这种可能吗？
ajax 将执行来自 db 的每个图像必须有一个 id 然后在单击图像时监听然后更新该图像 ID 的投票
请用图片显示html代码
@shibon 嗨，我已经更新了 html 的图片。当我点击照片 1 或 2 时，我希望更新相应的投票计数。
@MasivuyeCokile 你介意给我看个例子吗？

标签： php html mysql ajax

【解决方案1】：

在点击图片时，我们需要使用 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>

在审判中

$(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);
    });
});

【讨论】：

【解决方案2】：

这能满足您的需要吗？

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')]);
  });
});

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

使用 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

【讨论】：