删除后的JQuery刷新数据

Question

我有一个加载页面数据的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> 

Answer 1

利用完整的函数。完整的函数只有在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

只要可以追加对AJAX调用这样done()功能...

$(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(); 
       }); 
      });