Question

我搜索了数据库但是没有找到任何可以回答我问题的内容。我是Ajax的新手，所以我会尝试尽可能好地描述它。

我正在尝试为图像构建评级系统，只有两个选项：接受/拒绝。我有一个带有10k图像的分页画廊，它们都需要被评级（竞赛）。有一个特殊的评级系统（接受/拒绝），然后是这个概述库。已评级的每个缩略图都应显示可点击的文本/图像，例如“已接受”，具体取决于数据库值。然后，您可以单击此文本/图像，它将更改为“已拒绝”，并且mysql数据库条目也将同时更改。

左：“已接受”图像的初始状态。 / 右：更改了按钮（文本或图像）的值以及更新的数据库。

Example image http://shrani.si/f/2u/Gz/2y5idul/acc-rej.png

那么最简单的方法是什么？每个分页站点上有100个图像，下面有这些按钮，你必须能够来回更改值（很多时候，像只有两颗星的可编辑星级评级系统，呵呵）。

Answer 1

正如你所说的，应该使用ajax，我建议你使用jquery函数

在循环浏览数据库结果时，查看图像应该很简单在循环时你应该测试图像的值是被接受还是被拒绝，以便将它与我稍后将讨论的关联JS函数链接起来，并且在该函数中应该使用ajax请求来更新该行

function change_status_image(id,status,clicked)
{
     $.post("update.php",{image_id:id,image_status:status},function(data){
     //your callback to do something like update the value of the button

}）; }

这会产生一个ajax请求并在update.php中发送两个变量image_id和image_status你应该使用这样的东西

$q = mysql_query("UPDATE tbl_name SET column_name = '".mysql_real_escape_string($_POST['image_status'])."' WHERE image_id = '".mysql_real_escape_string($_POST['image_id'])."'  ";

关于函数创建div或按钮并将onclick att链接到change_status_image 例如

<img onclick="change_status_image(img_id,reverse_current_status)" >

Answer 2

使用jQuery。你需要两个脚本： /rate.php /rate.js

rate.php看起来像这样：

<?php
    // If there are values in $_POST['edits'], then this is an ajax call. 
    // Otherwise just display the gallery
    if ((!empty($_POST['edits']) && (count($_POST['edits']))) {
        foreach ($_POST['edits'] as $edit) {
            alter_image($edit); // some function to update the database
        }
        echo "success";
        exit;
    }

    $images = get_images(); // Some function to get the images from the database
?>
<?php foreach ($images as $image): ?>
<div class="gallery-image">
    <img src="<?php print $image -> src ?>" />
    <button>Accept</button>
    <button>Reject</button>
    <input name="id" value="<?php print $image -> id ?>"/>
</div>
<?php endforeach; ?>

rate.js看起来像这样：

$(function() {
    // attach click event handler to buttons
    $('.gallery-image').on('click', 'button', function() {
        var $this = $(this),
            ajaxSettings = {
                url: '',
                type: 'post',
                data: {
                    edits: [
                        {
                            id: $this.parent().find('input[name=id]').val(),
                            action: $this.html()
                        }
                    ]
                },
                success: function(response) {
                    if (response === 'success') {
                        // something to indicate success
                    } else {
                        // something to indicate error
                    }
                }
            }
        $.ajax(ajaxSettings);
    })
})

使用Ajax从PHP更新MySQL中的值，更改图像

2 个答案: