jQuery按钮点击时自动更新视图值

Question

我创建像按钮与数据库上的当前值，当按钮被点击时，必须自动更新视图上的值。 目前，数据库中的值已成功更新，但未自动更新视图。

这里是我的jQuery代码：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#like').on('click', function(e){ 
      var id = '{{$news->id}}'; 
      $.get('{{ url('view/like')}}/'+id, function(data){ 
       console.log(id); 
       console.log(data); 
       $('#like_data').empty(); 
       $.each(data, function(index, element){ 
        $('#like_data').append("<p>"+this.like+"</p>"); 
       }); 
      }); 
     }); 
    }); 
</script> 

这里是我的控制器：

public function like($id){ 

    $news = News::find($id); 

    $news->like += 1; 
    $news->save(); 

    return $news; 
} 

Answer 1

您需要将您的控制器JSON响应。像这样

public function like($id){ 

    $news = News::find($id); 

    $news->like += 1; 
    $news->save(); 

    return response()->json([$news], 200); 
} 

你不需要使用$.each()这种反应，因为你只发送单个物体响应。如果你想使用each只是简单地写

$('#like_data').html("<p>"+data.like+"</p>"); 

：

$.each(data, function (index, element) { 
     $("#like_data").append("<p>" + element.like + "</p>"); 
}); 

Answer 2

试试这个

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#like').on('click', function(e){ 
      var id = '{{$news->id}}'; 
      $.get('{{ url('view/like')}}/'+id, function(data){ 
       console.log(id); 
       console.log(data); 
       $('#like_data').empty(); 
       $.each(data, function (index, element) { 
       $("#like_data").append("<p>" + element.like + "</p>"); 
       }); 
      }); 
     }); 
    }); 
</script>