在php中使用ajax删除记录而不刷新页面

Delete record without a page refresh with ajax in php

本文关键字：刷新 记录 删除 php ajax      更新时间：2023-09-26

我正在开发Cakephp2.x，但我认为问题与Cakephp无关。我想删除一个不刷新页面的文件。

HTML/PHP:

<div class = "success" style="display:none;">Deleted successfully </div>
<div class = "error" style="display:none;">Error  </div>    
<a href="javascript:void(0)" class="button icon-trash" title = "delete" onclick="openConfirm('<?php echo $filename; ?>','<?php echo $idImage; ?>');"></a>

JavaScript:

function openConfirm(filename, idImage) {
    $.modal.confirm('Are you sure you want to delete the file?', function () {
        deleteFile(filename, idImage);
    }, function () {
    });
};
function deleteFile(filename, idImage) {
    var filename = filename;
    $.ajax({
        type: "POST",
        data: {
            idImage: idImage
        },
        url: "http://localhost/bugshot/deleteFile/" + filename,
        success: function (data) {
            if (data == 1) {
                $(".success").fadeIn(500).delay(2000).fadeOut(500);
            } else {
                $(".error").fadeIn(500).delay(2000).fadeOut(500);
            }
        },
        error: function () {
            alert("error");
        }
    });
}

foreach循环中的我的图像该代码显示图像

foreach（$file作为$files）：？>

   <?php    $downloadUrl = array('controller' => 'bugshot', 'action' => 'downloadImages', $files['Image']['filename'], '?' => array('download' => true));
             $imageUrl = array('controller' => 'bugshot', 'action' => 'downloadImages', $files['Image']['filename']);
        ?>
 <?php  echo $this->Html->link(
            $this->Html->image($imageUrl),
            $downloadUrl,
            array('class' => 'frame', 'escape' => false)
        );?>

删除链接

    <a href="javascript:void(0)" class="button icon-trash" title = "deleteImage" onclick="openConfirm('<?php echo $files['Image']['filename']; ?>','<?php echo $files['Image']['idImage'];; ?>');"></a>

除了删除图像或记录后，记录/图像仍显示在页面上，直到刷新为止，代码的工作效果很好。我该如何解决这个问题？

您需要使用javascript将其删除。

$.ajax({
        ...
        success: function (data) {
            if (data == 1) {
                $(".success").fadeIn(500).delay(2000).fadeOut(500);
                $('img[src="/pathToImg/' + filename + '"]').remove(); // Remove by src
                // $('#' + idImage).remove(); // Remove by ID.
            } else {
                $(".error").fadeIn(500).delay(2000).fadeOut(500);
            }
        }
        ...
    });

注意：var filename = filename;没有任何意义，因为您正在将文件名参数分配给具有相同名称的新变量。你可以直接删除它。

相关文章：