使用 ajax 调用删除 tr 时遇到问题答案

【问题标题】：Trouble deleting a tr with ajax call使用 ajax 调用删除 tr 时遇到问题
【发布时间】：2017-08-09 17:49:04
【问题描述】：

我正在尝试删除表格行，我的按钮有效，并且我的产品从数据库中删除，但是在刷新之前它不会在页面上删除，即使它有效，我也总是得到“它失败”.. .我做错了什么？似乎没有调用“成功”。

$(".deleteProduct").click(function(){
   var id = $(this).data("id");
   var token = $(this).data("token");
   $.ajax(
           {
               url: "/eventlineitem/"+id,
               type: 'DELETE',
               dataType: "JSON",
               data: {
                   "id": id,
                   "_method": 'DELETE',
                   "_token": token
               },
               success: function ()
               {
                   console.log("it Work");
               }
           });

   console.log("It failed");
 });

这是我的html

<tr class="item{{$item->id}}">
  <td class="align-center" scope="row">{{$item->product->id}}</td>
  <td class="align-center">{{$item->quantity}}</td>
  <td><a href="/products/{{$item->product->id}}">{{$item->product->name}}</a></td>
  <td class="align-center">{{$item->warehouse_id}}</td>
  <td class="align-center">{{$item->product->location}}</td>
  <td><div class="switch">
  <label><input type="checkbox"><span class="lever switch-col-green"></span></label>
  </div></td>
  <td><i class="material-icons deleteProduct" data-id="{{ $item->id }}" data-token="{{ csrf_token() }}">delete</i></td>
</tr>

【问题讨论】：

type: 'DELETE' 有效吗？
是的，我想当我按下 时，该行会从数据库中删除
我猜想学点新东西，w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.7
我刚读到，我到底应该学什么？？我得到一个状态 OK/200 并且它确实从数据库中删除
对不起，仅适用于像我这样不了解这种类型的人。请参阅下面的答案。

标签： javascript ajax laravel laravel-5

【解决方案1】：

我不知道您如何期望 html 知道您删除了该行？

我认为你应该在 Ajax 调用之前创建一个变量

var target = $(this).parents("tr");

然后在 ajax.success 调用

target.remove()

【讨论】：

我认为目标是 这里。虽然我们可以做 target.parents('tr').remove()
我试过了，还是和以前一样。它从数据库中删除我得到一个状态“OK”/ 200

【解决方案2】：

像这样改变你的成功函数

success: function ()
               {
                   $(".item"+id).remove();
                   console.log("it Work");
               }

【讨论】：

【解决方案3】：

success: function() {
    $(this).parent().parent().remove();
    console.log("it Work");
}

顺便说一句，如果 console.log 在这里被触发，那么你就知道成功了。

【讨论】：

我仍然得到“失败”，仍然从数据库中删除，当页面刷新时，该行消失了。
控制台是否记录了什么？你确认成功被解雇了吗？
控制台记录“失败”并且我返回的状态是 OK/200（使用 laravel devtools）
它总是说失败，因为你有它在 ajax 调用之外。你要找回“它工作”的那个吗？
您似乎没有返回任何数据，因为您正在运行type:delete，我的猜测是成功只会在收到某些内容时触发。如果你确信它每次都能正常工作，那么你可以删除 ajax 之外的行，否则我认为你需要返回一些东西才能让它成功。

【解决方案4】：

你可以试试下面的代码吗：

$(".deleteProduct").click(function(){
    var _selector = $(this);
    var id = _selector.data("id");
    var token = _selector.data("token");

    $.ajax({
        url: "/eventlineitem/"+id,
        type: 'DELETE',
        dataType: "JSON",
        data: {
            "id": id,
            "_method": 'DELETE',
            "_token": token
        },
        success: function (){
            console.log("it Work");
            _selector.parents('tr.item' + id).remove();
        }
    });
});

让我知道它是否适合你。

【讨论】：

不，此代码不起作用，是的，我的产品从数据库中删除，但没有从 dom 中删除。我让它可以从 laravel 手动返回一条消息，而不是使用状态码然后使用你的 remove