使用AJAX删除图像而不重新加载页面

时间:2017-03-16 12:13:12

标签: javascript ajax

我想使用AJAX从服务器上删除上传的图像,而不使用页面显示。

我尝试编写一些代码,但没有任何结果。

这是我的HTML代码:

              <div class="row"> 
                @if(!empty($service_data) && !empty($service_data->sd_folder))
                @foreach(File::files(Helper::getUserUploadFolder($service_data->sd_uid).'services/'.$service_data->sd_folder) as $others_img)
                    {{--*/ $img_filename = pathinfo($others_img)['filename']; 
                           $img_basename = pathinfo($others_img)['basename']; 
                        if($img_filename == 'main') continue; /*--}}                        

               <div class="col-sm-4" id="{{$img_basename}}">
                 <div class="example">
                  <div class="thumbnail">
                   <img class="cover-image overlay-figure overlay-scale" src="{{asset($others_img)}}">
                    <div class="caption">
                      <p><a class="btn btn-primary margin-right-5 img_delete" data-filename="{{$img_basename}}" role="button">DELETE</a></p>
                    </div>
                  </div>
                 </div> 
              </div>

                @endforeach
                @endif  
             </div> 

这是我的JS代码:

        var service_folder = $('#service_folder').val();


    $('body').on('click', '.img_delete', function(){

        var filename = $(this).data('filename');
        var this_div = $(this);

        if((service_folder === '') || (service_folder == 'undefined')) return false;
        else if((filename === '') || (filename == 'undefined')) return false;

        var img_delete_ajax = $.get("/en/ajax/user/img_upload_delete",{main_folder: 'services', imgs_folder: service_folder, filename: filename}, function(data){
                                console.log("delete", data);
                              });

        img_delete_ajax.always(function(jqXHR, textStatus) {
            if (textStatus == "success"){
                $('#'+filename).fadeOut(250);

            }


        });

    });

有人可以推荐我或帮我这个功能吗? 非常感谢你!

1 个答案:

答案 0 :(得分:0)

试试这个

&#13;
&#13;
var service_folder = $('#service_folder').val();

$('.img_delete').on('click', function() {

    var filename = $(this).data('filename');
    var this_div = $(this);

    if ((service_folder === '') || (service_folder == 'undefined')) return false;
    else if ((filename === '') || (filename == 'undefined')) return false;

    $.get("/en/ajax/user/img_upload_delete", {main_folder: 'services',   imgs_folder: service_folder,filename: filename}).done(function(data) {
        if (data.success) {
            $('#' + filename).fadeOut(250);
        }
    });
});
&#13;
&#13;
&#13;

成功后,从服务器发送参数{success:true}。别忘了将CONTENT_TYPE设置为&#34; application / json&#34;或者你可以使用 JSON.parse(data)将字符串转换为json。