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

Question

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

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

我的 php 代码来自我使用 img_id 删除和显示所有图像的地方-

<?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
});

那么就像我在评论上面所说的那样，不要在其中回显 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 从删除按钮传递到模式，然后最后传递到服务器的一般思路。

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

How to delete specific image from bootstrap modal using ajax?

php

ajax

twitter-bootstrap

bootstrap-modal