如何使用ajax从引导模式中删除特定图像？

Question

当用户选择每个图像右侧的红色删除图标时，我想删除特定图像。 截屏-

ss 在用户单击已删除图标后显示-

我使用 img_id 删除并显示所有图像的 php 代码-

<?php 

             include_once '../../php/connection.php';
                                                            
             $query = "SELECT * FROM img_info LEFT JOIN estate_infos ON img_info.estate_infos_id = estate_infos.id where img_info.estate_infos_id = $mdoalid";
             $stmt=$dbcon->prepare($query);
             $stmt->execute();
             $count = $stmt->rowCount();
             $datas=$stmt->fetchAll(PDO::FETCH_ASSOC);
             foreach ($datas as $key => $data)
              {   $pic = $data['image'];
                  $a=$data['img_id']; 
                                                                    
              ?>
             <img src="../<?php echo $pic ?>" width="360"   height="150">                                                              
             <a data-toggle="modal" data-target="#delimg<?php echo $a; ?>">                                                            
             <i class="far fa-times-circle fa-2x"  aria-hidden="true" style="color:red"></i></a>                                                                      

              <?php echo $a?> // displays the id of each image displayed (wont display in production)

我的模态代码 -

                <!-- Modal -->
                <div class="modal fade" id="delimg<?php echo $data['img_id']; ?>"   tabindex="-1" aria-labelledby="delimglabel" aria-hidden="true">
                 <div class="modal-dialog">
                 <div class="modal-content">
                 <div class="modal-header">
                 <h5 class="modal-title" id="delimglabel">Delete Image</h5>
                 </div>
                 <div class="modal-body">
                       Are you sure you want to delete the image?                                              
                       <?php echo $data['img_id'] ?>
                  </div>
                 <div class="modal-footer">
                  <button type="button" class="delbtn btn btn-sm btn-secondary text-white btn-danger">Delete</button> 
                //Here "delbtn" will trigger the ajax delete image from database
                   </div>
                  </div>
                  </div>
                 </div>

                <?php  }  ?>

我需要修复的 ajax 代码 -

<script type="text/javascript">
$(document).ready(function() {
    $(".delbtn").on("click", function(e) {
        e.preventDefault();
        alert("Working");
        jQuery.ajax({
            type: "POST",
            url: "image-del.php",
            data: < ? php echo $data['img_id'] ? > ,
            success: function(response) {
                alert('Image Deleted !');
            },
            error: function(response) {
                alert('Image NOT Deleted !')
            }
        });
    });
});
</script>

我的mysql pdo代码通过id从数据库中删除图像，这个文件名为“image-del.php”-

<?php 
include_once 'connection.php';
if (isset($_POST['delbtn'])) {
$img_id = $_POST['img_id'];   
$sql = "DELETE FROM img_info WHERE img_id=:img_id";
$stmt = $dbcon->prepare($sql);
$stmt->bindparam(':img_id', $img_id);
$stmt->execute();


?>

那么，如何才能让具体的图片被ajax正确删除呢？

-提前谢谢你

Answer 1

这实际上是一个两步过程。想法是这样的：

首先，像往常一样，渲染所有图像及其按钮以打开模式（删除按钮以打开模式）。

<?php foreach ($datas as $key => $data): ?>
<img src="../<?php echo $data['image'] ?>" width="360" height="150">
<a data-toggle="modal" data-target="#delete-modal" data-imgid="<?php echo $data['img_id']; ?>">
    <i class="far fa-times-circle fa-2x"  aria-hidden="true" style="color:red"></i>
</a>
<?php endforeach; ?>

您不需要在循环内提​​供 HTML 模式。您只需要一种模式。您不需要每个图像的每个模态。

所以只要把它改成这个，放在页面底部：

<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="delimglabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delimglabel">Delete Image</h5>
            </div>
            <div class="modal-body">Are you sure you want to delete the image?</div>
            <div class="modal-footer">
                <button type="button" class="delbtn btn btn-sm btn-secondary text-white btn-danger" data-delete-imgid="">Delete</button> 
            </div>
        </div>
    </div>
</div>

之后，需要在modal打开的时候触发一个事件，获取图片id，放到data属性中，这样在你最后请求删除并发送的时候就可以使用和访问了到服务器：

$('#delete-modal').on('show.bs.modal', function(e) { // when the delete modal opens
    var imageId = $(e.relatedTarget).data('imgid'); // get the image id
    $(e.currentTarget).find('.delbtn').attr('data-delete-imgid', imageId); // and put it in the delete button that calls the AJAX
});

然后就像我在 cmets 上面所说的那样，不要在其中回显 PHP 图像 ID。使用您在按钮中应用的 ID：

$(".delbtn").on("click", function(e) {
    e.preventDefault();
    jQuery.ajax({
        type: "POST",
        url: "image-del.php",
        data: { delbtn: $(this).attr('data-delete-imgid') }
        success: function(response) {
            alert('Image Deleted !');
        },
        error: function(response) {
            alert('Image NOT Deleted !')
        }
    });
});

这应该作为如何将 ID 从删除按钮传递到模式，然后最终传递到服务器的一般思路。