仅当 AJAX 调用和数据库删除成功时，如何删除视图中的一行？答案

【问题标题】：How can I delete a row in the view only if the AJAX call & db deletion was successful?仅当 AJAX 调用和数据库删除成功时，如何删除视图中的一行？
【发布时间】：2012-10-20 06:59:20
【问题描述】：

我有一个表格，其中每一行都有一个删除按钮。实际上我每次都删除该行而不检查ajax调用是否成功。我怎样才能做到这一点，以便只有在 ajax 调用正常时才会删除该行。

这是我在每一行的点击处理程序

$("body").on('click', ".ui-icon-trash" ,function(){

    var $closestTr = $(this).closest('tr');  // This will give the closest tr
                            // If the class element is the child of tr          
    deleteRowFromDB(oTable, closestTr);
    $closestTr.remove() ;  // Will delete that
 });

这里是我的 ajax 调用

function deleteRowFromDB(oTable, sendallproperty){

        var deleteEntryRoute = #{jsRoute @Application.deleteConfigurationEntry() /}
        console.log("route is: " + deleteEntryRoute.url)
        $.ajax({
           url: deleteEntryRoute.url({id: sendallproperty}),
           type: deleteEntryRoute.method,
           data: 'id=' + sendallproperty
        });

【问题讨论】：

将删除行的代码放入 ajax 调用的成功处理程序中。
你能给我看一个示例代码吗？
我愿意，但有一些问题。您的 deleteRowFromDB 函数具有参数 oTable 和 sendallproperty，它们似乎用作字符串。当你调用它时，你传递了两个未定义的变量。

标签： jquery ajax

【解决方案1】：

在您的 Ajax 请求的 成功回调 函数中调用它

$.ajax({
         url: deleteEntryRoute.url({id: sendallproperty}),
         type: deleteEntryRoute.method,
         data: 'id=' + sendallproperty.
         success : function() {
             // Your code here
        }
     });

编辑

$("body").on('click', ".ui-icon-trash" ,function(){

    var $closestTr = $(this).closest('tr');     
    deleteRowFromDB(oTable, $closestTr);
});

function deleteRowFromDB(oTable, sendallproperty){

   var deleteEntryRoute = #{jsRoute @Application.deleteConfigurationEntry() /}
   console.log("route is: " + deleteEntryRoute.url)
   $.ajax({
           url: deleteEntryRoute.url({id: sendallproperty}),
           type: deleteEntryRoute.method,
           data: 'id=' + sendallproperty,
           success : function() {
             sendallProperty.remove();
           }
   });
};

{id: sendallproperty} 也是一个 jQuery 对象..

如果你想传递 id ... 你需要这样做

{id: sendallproperty.attr('id')}

【讨论】：

感谢您的示例，但我怎么知道应该删除哪个表行？
你什么时候发送 Ajax 请求？？
当按下行上的删除图标时将调用它。那么如果该条目在服务器上已成功删除，则相应的行应该被删除

【解决方案2】：

$("body").on('click', ".ui-icon-trash" ,function(){

    var $closestTr = $(this).closest('tr');  // This will give the closest tr
                        // If the class element is the child of tr          
    if(true === deleteRowFromDB(oTable, closestTr)){
        //if true returned from the success in the ajax function, then we remove
        $closestTr.remove() ;  // Will delete that
    }

 });



function deleteRowFromDB(oTable, sendallproperty){

    var deleteEntryRoute = #{jsRoute @Application.deleteConfigurationEntry() /}
    console.log("route is: " + deleteEntryRoute.url)
    $.ajax({
       url: deleteEntryRoute.url({id: sendallproperty}),
       type: deleteEntryRoute.method,
       data: 'id=' + sendallproperty,
       success:function(data){
           return true;
       },
       error:function(){
           return false;
       }
    });
}

【讨论】：

你已经利用了成功事件，为什么不把它全部都放在那里呢？
@Babak Naffas 有什么特别的理由不应该这样做吗？