删除后JQuery刷新数据

时间:2017-01-08 03:18:22

标签: jquery ajax

我有一个AJAX脚本,可以在页面上加载数据。数据显示没有问题。问题是当我点击按钮删除记录时。但是,记录被删除,成功后数据不会刷新。有没有办法刷新数据而不重新加载整个页面?

   <script>
    $(document).ready(function () {
        ajaxFunction ()
    });
    function ajaxFunction() {
        event.preventDefault();
        contentType: "application/json; charset=utf-8";
        dataType: "json";
        $.get('getShoppingCart.ashx', function (data) {
            {
                var result = '';
                $.each(data, function (index, value) {
                    result += '' +
                        '<div class="main-area bg-white">' +
                            '<div class="row">' +
                                '<div class="columns medium-12">' +
                                    '<div class="row">' +
                                        '<div class="medium-6 columns">' +
                                            '<img class="img-responsive pull-right" id="RewardImage_' + index + '" src="' + value.RewardImage + '" />' +
                                        '</div>' +
                                        '<div class="medium-6 columns">' +
                                            '<label id="RewardTitle_' + index + '">' + value.RewardTitle + '</label>' +
                                            '<br />' +
                                            '<label id="RewardDescription_' + index + '">' + value.RewardDescription + '</label>' +
                                            '<br />' +
                                            '<label id="RewardPoints_' + index + '">' + value.RewardPoints + '</label>' +
                                            '<br />' +
                                            '<label id="ExpirationDate_' + index + '">' + value.ExpirationDate + '</label>' +
                                            '<br />' +
                                            '<button type="button" id="' + value.RewardOfferID + '" class="btn">Remove Reward</button>' +
                                            '<br />' +
                                            '<br />' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>'
                });
                if (!result) {
                    result = 'No Items in the Shopping Cart';
                };

                $('#result').html(result);
            }
        })
        };
        $(document).on('click', '.btn', null, function (event) {
            event.preventDefault();
            var varID = this.id;
            $.ajax({
                contentType: "application/json; charset=utf-8",
                data: 'ID=' + varID,
                url: "deleteCartItem.ashx",
                dataType: "json",
                success: function (data) {
                    ajaxFunction()
                }
            });
        });
</script>

1 个答案:

答案 0 :(得分:1)

利用完整的功能。完整的功能只有在成功后才能执行。 of ajax。

 $(document).on('click', '.btn', null, function (event) {
            event.preventDefault();
            var varID = this.id;
            $.ajax({
                contentType: "application/json; charset=utf-8",
                data: 'ID=' + varID,
                url: "deleteCartItem.ashx",
                dataType: "json",
                success: function (data) {

                },
               complete: function(data){
                ajaxFunction();

                }
            });
        });

OR

只需将done()函数附加到像这样的ajax调用...

$(document).on('click', '.btn', null, function (event) {
                event.preventDefault();
                var varID = this.id;
                $.ajax({
                    contentType: "application/json; charset=utf-8",
                    data: 'ID=' + varID,
                    url: "deleteCartItem.ashx",
                    dataType: "json",
                    success: function (data) {

                    }    
                }).done(function() { 
                 ajaxFunction();
                 });
            });