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

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

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)

“width=“360”height=“150”>
删除
//这里的“delbtn”将触发ajax从数据库中删除图像

我需要修复的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>

$（文档）.ready（函数（）{
$（“.delbtn”）。在（“单击”，函数（e）{
e、 预防默认值（）；
警惕（“工作”）；
jQuery.ajax({
类型：“POST”，
url:“image del.php”，
数据：<？php echo$data['img_id']？>，
成功：功能（响应）{
警报（'图像已删除！'）；
},
错误：函数（响应）{
警报（'图像未删除！'）
}
});
});
});

我的mysql pdo代码，用于从数据库中按id删除图像，此文件名为“image del.php”-

那么，如何通过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从delete按钮传递到modal，然后最终传递到服务器的一般思路。

不，不要在那里回显图像ID。将其放入

数据

属性中，并将其传递到ajax数据中parameter@kevin我将从那里删除图像id。顺便问一下，我可以在哪里使用mod中的data属性al？你能给我举个例子吗。

if（isset（$\u POST['del\u btn']）

…这永远不会被触发，因为你发送给你的用户的数据中没有

del\u btn

script@brombeer抱歉，应该是“delbtn”而不是del_btn，我会编辑问题。没关系，您只发送一个整数：

data:<？php echo$data['img_id']？>

$\u POST['delbtn']

和

$\u POST['img\u id']

不存在。使用浏览器的DevTools/NetworkTab查看任何请求/响应感谢您的回答，但在数据中删除imgid=“”如果我不回显动态图像id或使用静态“imageId”，如何传递动态图像id“？@Fury这是一个供你学习的小提琴样品。当然，这只取决于“删除”按钮的位置。服务器代码，剩下的就交给你了。这应该足以作为一个指南you@Fury谢谢你的指导。@Fury很高兴这有帮助

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


?>

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

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

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

$(".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 !')
        }
    });
});