javascript - 使用ajax动态更新表格行的值

Question

我正在尝试在调用 onclick 事件时使用 Ajax 更新表格行的值( View )。

View 已更新，但问题是我无法获取 View 的新值以显示在该特定表格行上。

我必须刷新页面才能看到更新后的浏览量值，这不是我想要的。

我希望它在单击按钮时动态更新。这就是我正在做的。

<table>
@foreach($data as $datum)
<tr>
  <td><span class="view2">{{$datum->views}}</span></td>
  <td><button class="btn btn-default views"  value="{{$datum->game_id}}">click</button></td>
 </tr>
@endforeach                                         
</table>
<script>
        $('.views').click(function (event) {
            var game_id = this.value;
            //alert(game_id);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type:'POST',
                dataType:'JSON',
                url:'{{url('home/update-views')}}',
                data:'game_id='+game_id,
                success:function(data)
                {
                    var data=eval(data);
                    message=data.message;
                    var countSpan = $(this).parent().parent().find(".view2");
                    countSpan.text(message);
                }
            });
        })
    </script>

Answer 1

需要 2 处更改。

1.将对象捕获到一个变量中，以便它可以用于成功回调

2.使用变量和.closest()将新消息粘贴到相应的td。

所以代码需要:-

<script>
    $('.views').click(function (event) {
       var obj = $(this); // captur the object into a variable so that it can be available for success callback
        var game_id = obj.val();// use variable to get value
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:'POST',
            dataType:'JSON',
            url:'{{url('home/update-views')}}',
            data:'game_id='+game_id,
            success:function(data)
            {
                var data=eval(data);
                message=data.message;
                obj.closest('tr').find(".view2").text(message); // use the variable along with closest to paste new message
            }
        });
    })
</script>