Question

我正在尝试从我的图库中删除图像而不刷新页面。解决方案是使用Ajax，但我不知道如何因为我是ajax的新手。这是用于从我的数据库中删除图像的代码，这是在我的DAOImpl中实现的：

@Override
public void eliminaImage(int id_foto) {
    Image imageDaEliminare;
    Criteria crit = sessionFactory.getCurrentSession().createCriteria(Image.class);
    crit.add(Restrictions.eq("id_foto", id_foto));
    imageDaEliminare = (Image) crit.uniqueResult();
    Session session = sessionFactory.getCurrentSession();
    session.delete(imageDaEliminare);
    session.flush();
}

这是我的控制器，用于显示图库并从中删除图像：

@RequestMapping(value = "/homeUtente", method = RequestMethod.GET)
    public ModelAndView getIndex(){
        ModelAndView mav = new ModelAndView();
        mav.addObject("galleria", usersService.getAllFoto());
        return mav;
    }

    @RequestMapping(value="/homeUtente", method = RequestMethod.POST)
    public ModelAndView eliminaImage(HttpServletRequest request,@RequestParam("id_foto") int id_foto) {
        usersService.eliminaImage(id_foto);
        ModelAndView mav = new ModelAndView();
        mav.addObject("galleria", usersService.getAllFoto());
        return mav;
    }

这是我的观点页面：

<c:forEach var="gallery" items="${galleria}">
    <div class="uk-overlay">
        <a href="data:image/jpeg;base64,${gallery.value}" data-lightbox="roadtrip">
            <img id="my_image2" src="data:image/jpeg;base64,${gallery.value}" width="400" height="250" alt=""></img>
        </a>
        <div class="elimina">
            <form action="homeUtente" method="post">
                <input type="hidden" name="id_foto" value="${gallery.key}">
                <button class="uk-icon-button uk-icon-trash-o" id="submit"></button>
            </form>
        </div>
    </div>
</c:forEach>

最后我试着写这个删除图像的ajax代码，但我不知道如何隐藏删除的图像：

$('.elimina').each(function(){
$.ajax({
    url:"homeUtente",
    type:'post',
    data:{id:'this.id_foto'},
    success:function(result){
        //TO IMPLEMENT!
    }
    error:function(err){
    }
}));

Answer 1

您可以在“global”var中保存要删除的图像，并在成功事件中将其删除。

var imageToDelete;

$('.elimina').each(function(){

imageToDelte = $(this)
$.ajax({
    url:"homeUtente",
    type:'post',
    data:{id:'this.id_foto'},
    success:function(result){

        // to remove the element
        $(imageToDelete).closest('.uk-overlay').remove();
        // OR if you only want to hide it
        $(imageToDelete).closest('.uk-overlay').hide();

    }
    error:function(err){
    }
}));

Answer 2

如果您愿意，例如，显示一个弹出窗口以确认删除图像，请在“成功”之前添加此密钥：

beforeSend:function(){
      //do anything
}

使用数据库mysql中的Ajax删除图像（使用Spring MVC + Hibernate）

2 个答案: