Question

我在opencart中有一个库来旋转图像并保存在db中。我有一个Rotate按钮，该按钮触发ajax调用，旋转并保存后，它返回图像并显示在相应的div中。

在第一次调用时，它工作正常，但是如果再次单击，它会旋转并将图像保存在DB中，但不要更改前端的视图。

这里是我的控制器功能：

public function rotateImage(){
    $img_path = $this->request->get['image_path'];
    $degree = $this->request->get['degree'];
    $this->load->model('tool/image');
    $new_image = $this->model_tool_image->rotate($img_path, $degree);
    return $new_image;
}

Ajax呼叫：

<script>
   $('.image-rotate').click(function(){
   var id = $(this).attr('id');
   var image_path = $(this).attr('data-image-path');
   console.log(id);
   $("#image-"+id).empty();
   $.ajax({
       type: 'get',
       url: 'index.php?route=catalog/review/rotateImage&token=<?php echo $token; ?>&image_path='+image_path+'&degree=90',
       dataType: 'html',
       success: function(html) {
           var image = "<a data-fancybox='' href='"+html+"' class='fancybox'><img id='r_image_"+id+"' src='"+html+"' alt='photo' width='100' /></a>";

           $("#image-"+id).html(image);
       },
       error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });
});
</script>

图书馆：

public function rotate($file, $degree) {
    $old_image = $file;

    $extension = pathinfo($file, PATHINFO_EXTENSION);
    $new_image = 'cache/' . utf8_substr($file, 0, utf8_strrpos($file, '.')) . '-' . '600x600.' . $extension;

    $image = new Image(DIR_IMAGE . $old_image);
    $image->rotate($degree);
    $image->save(DIR_IMAGE . $old_image);
    if ($this->request->server['HTTPS']) {
        return HTTPS_CATALOG . 'image/' . $old_image;
    } else {
        return HTTP_CATALOG . 'image/' . $old_image;
    }
}

一切正常，但仅在首次调用时有效，此后仅更改后端数据（图像成功旋转），但前视图不变。

如果您需要更多详细信息，请访问plz commnet。

Answer 1

我找到了解决方法...

浏览器需要新的链接才能始终显示（无需刷新），因此我只是在ajax成功html数据中添加了带有图像链接的随机数...

 var image = "<a data-fancybox='' href='"+html+"' class='fancybox'><img id='r_image_"+id+"' src='"+html+"?"+Math.random()+"' alt='photo' width='100' /></a>";

此外，我将控制器的return $new_image更改为返回jsono_encode bcz ajax请求需要json响应（也许我错了，但这对我有用）。

两次调用函数时未附加Ajax成功数据

1 个答案: