Question

我正在尝试使用jquery ajax从表中删除一行。经过几次尝试，我无法弄清楚为什么我的代码（删除部分）不起作用，因为我是ajax和javascript的新手。使用服务器的ajax加载数据工作正常，脚本没有控制台错误。当我按删除时，我在网络选项卡上看不到任何内容。这是我的代码：

routes.php文件

Route::delete('users/{id}','AjaxController@destroy');

AjaxController.php

public function destroy($id)
    {
      $user = User::findOrFail($id);
      $user->delete();
    }

视图：

<table id="users" class="table table-bordered">
            <thead>
              <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody id="abc">

            </tbody>
          </table>

脚本：

$(document).ready(function(){
        var $tbody = $('#abc');

        // getting data from server
        $.ajax({
          type   : 'GET',
          url    : 'api/users',
          success: function(users) {
            $.each(users, function(i, user){
              $tbody.append('<tr id="user_' + user.id + '"><td>'+user.name+'</td><td>'+user.phone+'</td><td><button type="button" class="btn btn-xs btn-danger" id="delete" value="'+user.id+'" name="button">Delete</button></td></tr>');
            });
          },
          error: function(){
            alert('error loading data');
          }
        });

          // deleting data
          $('#delete').on('click', function(e){
            var user_id = $(this).val();
            $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
              }
            })
            e.preventDefault();
            var user = {
              id : user_id
            };
            $.ajax({
              type: 'DELETE',
              url : '/user/'+user.id,
              success : function(deleteUser)
              {
                $("#user_" + user_id).remove();
              },
              error : function()
              {
                alert('error deleting data');
              }
            });
        }); // deleting block ends
      });
    });

Answer 1

这里的问题是您一遍又一遍地使用相同的id。但是，由于您正在动态插入内容，这个问题更加复杂，但您的事件绑定只是观察页面加载时可用的元素。让我们解决所有这些问题。首先，我们需要取消ID。

class="btn btn-xs btn-danger" id="delete" value="'+user.id+'"

需要改为

class="btn btn-xs btn-danger btn-delete" value="'+user.id+'"

大。我们使用了btn-delete。这不是特定于此特定用户功能的。 CRUD的工作方式，您应该能够为通过CRUD控制器交互的每个模型重用此代码。

现在我们需要委托我们的事件绑定，并且我们还会使按钮更加通用，如前一段所述。为了帖子的长度，我只会展示你应该如何设置你的javascript。

$('table').on('click', '.btn-delete', function(e){
    e.preventDefault();

    var $btn = $(this),
        $table = $btn.closest('table');

    $.ajax({
        url: $table.data('resource') . '/' . $btn.val(),
        type: 'delete' 
    }).done(function(response){
        console.log(response);
    }).error(function(x,t,m){
        console.warn(x,t,m);
    });
});

令牌可以移动到文件的top，不需要嵌套：

$.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
     }
});

最后，我们需要将data-resource属性附加到我们的表中：

<table ... data-resource="users"

现在您已经拥有了一个可重复使用的模型，只需要将data-resource="model"属性附加到您的表格中，并添加一个btn-delete类的按钮，其值为id该实体。

Laravel简单的crud与jquery ajax

1 个答案: