Question

所以我创建了一个小的Ajax脚本，它从我的数据库和视图中删除项目，遗憾的是视图只在重新加载后被更改（项目被删除）。

我可以在我的成功函数中执行window.location.reload（），但我不想重新加载整个页面。

如何处理此问题，以便我无需重新加载整个页面，并且视图中的项目将被删除。

<script>
    $(document).ready(function() {
      $(".destroy-device").click(function(e) {
        e.preventDefault();
        var id = $(this).attr("data-id");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });
        $.ajax({
            url: 'destroy/'+id,
            type: 'post',
            data: {_method: 'delete',
                    id: id},
            success:function(data) {
                console.log('success');
            }
        });
      })
    });
</script>

HTML：

<form method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="hidden" name="id" value="{{ $deviceValue->id }}">
    <button type="button" class="btn btn-danger destroy-device" data-id="{{ $deviceValue->id }}" name="destroy_device">
        <span class="glyphicon glyphicon-trash"></span>
    </button>
</form>

Answer 1

假设您有一个项目列表（从数据库加载），并执行ajax调用以从数据库中删除其中一些项目。您可以退回已删除的商品＆＃39; ids进入ajax回调并从UI中删除它们：

HTML

<ul id="myList">
   <li data-item="1">Item one</li>
   <li data-item="2">Item two</li>
   <li data-item="3">Item three</li>
</ul>

的jQuery

$.ajax({
   ...
   success: function(data) {
      // data --> Array of deleted items (data-item)
      if (data) {
         var list = $('#myList');
         for(var i=0;i<data.length;i++) {
            list.children('li[data-item="' + data[i] + '"]').remove();
         }
      }
   }
});

您可以使用表或其他UI元素执行类似的操作

Ajax在重新加载后删除项目

1 个答案: