使用ajax加载引导按钮

Question

我正在尝试使用 ajax 删除 mysql 的记录。一切正常。但是当我单击垃圾按钮时，我还想向按钮添加加载。下面是我的按钮链接

<a href="#" id="delpost" data-id="'.$row['id'].'" class="btn btn-default pull-right" title="Delete"><i class="fa fa-trash-o"></i></a>

下面是我的ajax

$(function() {
    $('body').on('click', '#delpost', function() {
        var del_id = $(this).attr("data-id");
        var info = 'id=' + del_id;
        var parent = $(this).closest('li');
        var btn = $(this);
        btn.button('loading');
        if (confirm("Sure you want to delete this Post? There is NO undo!")) {
            $.ajax({
                type: "POST",
                url: "/delete-post.php",
                data: info,
                beforeSend: function() {
                    parent.animate({
                        'backgroundColor': '#fb6c6c'
                    }, 300);
                },
                success: function() {
                    btn.button('reset');
                    parent.slideUp(300, function() {
                        parent.remove();
                    });
                }
            });
        }
        return false;
    });
});

Answer 1

这是简单的 jQuery 解决方案，与 bootstrap 无关

你可以添加一个loading.gif的隐藏图片，你可以从谷歌下载它并调整它的css，使它与你的删除链接出现在同一行：

<a href="#" id="delpost" data-id="'.$row['id'].'" class="btn btn-default pull-right" title="Delete"><i class="fa fa-trash-o"></i></a> <img src="path/to/your/loading.gif" style="display:none;" alt="loading" id="loading" />

并修改您的 jquery 代码如下：

$(function() {
        $('body').on('click','#delpost',function(){
            var del_id = $(this).attr("data-id");
            var info = 'id=' + del_id;
            var parent = $(this).closest('li');
            var btn=$(this);
            btn.button('loading');
            if(confirm("Sure you want to delete this Post? There is NO undo!"))
            {
                $.ajax({
                    type: "POST",
                    url: "/delete-post.php",
                    data: info,
                    beforeSend: function() {
                        parent.animate({'backgroundColor':'#fb6c6c'},300);
                        $('#loading').show();//shows loading gif image
                    },
                    success: function(){
                        $('#loading').hide();//hides loading gif image
                        btn.button('reset');
                        parent.slideUp(300,function() {
                            parent.remove();
                        });
                    }
                });
            }
            return false;
        });
});