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>