点击按钮时，jQuery会自动更新视图上的值 - jQuery automatically updated value on view when button clicked

jQuery automatically updated value on view when button clicked

本文关键字：更新新视图按钮 jQuery | 更新日期: 2023-09-27

我在数据库上创建了当前值的按钮，当按钮被单击时，该值必须在视图上自动更新。当前，该值已在数据库上成功更新，但未在视图上自动更新。

这是我的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;
}

您需要从控制器传递JSON响应。这样的

public function like($id){
    $news = News::find($id);
    $news->like += 1;
    $news->save();
    return response()->json([$news], 200);
}

您不需要为这个响应使用$.each()，因为您只发送单个对象响应。只需编写以下代码:

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

如果你想使用each，只需写:

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

试试这个

<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>