使用 Laravel、Ajax 和 jQuery 的“点赞”系统答案

【问题标题】："Like" system using Laravel, Ajax and jQuery使用 Laravel、Ajax 和 jQuery 的“点赞”系统
【发布时间】：2019-06-26 23:40:49
【问题描述】：

我不了解 Ajax 与 Laravel 的结合。我正在尝试建立一个类似的系统，它已经设置好了。问题是;当您单击“赞”按钮时，整个页面都会刷新。但我希望它是动态的。为此，我需要使用 Ajax 和 jQuery

我尝试过构建一个 jQuery 函数，但我不知道如何解析 {id}

您能告诉我在哪里可以了解有关此主题的更多信息吗？也许是一个教程，或者您能否向我解释一下我缺少的部分。

$('.like').on('click', function(event) {
console.log("clicked the button");

$.ajax({
    method: 'POST',
    url: /{id}/addlike
  })
});

这是个赞按钮：

<form action="/{{$new->id}}/addlike" method="post">
                    @csrf
                    <button value="{{$new->likes}}" class='like' type="submit"><i class="fas fa-fire"></i></button>
</form>

这是类似的路线：

Route::post('/{id}/addlike', 'ImageController@like');```

这是“喜欢”的控制器

public function like($id)
{
    $picture = ImageModel::find($id)->increment('likes');

    return back();
}

【问题讨论】：

标签： php jquery laravel

【解决方案1】：

删除type='submit' 它将重定向您的页面，只需添加type="button" 并且在.like function() 中，ajax 应该是这样的，始终应用 if 和 else 条件以防出现错误，以便它反映在您的浏览器控制台上。

$.ajax({                                                            
                type: "POST",                                                                                                                      
                url: Apiurl,
                data: {
                   "_token": "{{ csrf_token() }}",
                        "id": id
                  }
                success: function (data) 
                {
                    if(data.status ==  'success' )
                    {
                       //apply your condition 
                    }
                    else
                    {
                       console.log('error');                            
                    }                            
               } 
           });

【讨论】：

【解决方案2】：

您可以在 ajax 函数中传递数据，例如 data: {id: yourid, name: somename}，也可以像这样将 laravel 变量值分配给 js：

var testId = '{{$yourid}}'

因此，在您的情况下，您可以制作像 testId + '/addlike' 这样的 url，也总是让 id 或其他动态的东西像 'addlike/' + testId 这样放在最后。

$('.like').on('click', function(event) {
console.log("clicked the button");

var id = '{{$yourId}}'

$.ajax({
    method: 'POST',
    url: id + '/addlike'
  })
});

希望对你有帮助

【讨论】：

注意，这仅在 OP 代码位于刀片模板内时才有效。如果代码在单独的 JavaScript 文件中，这将不起作用
您好，感谢您抽出宝贵时间回复。不幸的是，这不起作用。 “图像”应用于每个。所以在foreach循环之外，它不知道唯一ID是什么。单独的 Javascript 文件还会阻止系统知道 {{$yourID}} 是什么。但是谢谢你和我一起思考。

【解决方案3】：

不要添加

return back();

在您的控制器中，您可以使用

return response()->json(['success' => 'Liked']);

或任何您想在此处输入的内容以在 ajax 中传递数据。不要在您的帖子中添加操作，而是可以使用隐藏输入将您的 id 放在那里并调用它（如果您使用的是 jquery）

$('input [name=nameofhidden]').val();

然后在您的 ajax 中添加成功以及更新数据后您想要做什么。

var id = $('input[name=nameofhidden]').val();
$.ajax({
    method: 'POST',
    url: '/'+id+'/addlike',
    success: function(ifyouhavedata){
     //what you want to do
    }
  })

【讨论】：

希望对您有所帮助。
那个 url 需要引号并且 {id} 不正确，请参阅其他答案以了解正确的格式
哦，是的，我没注意到

【解决方案4】：

您需要返回 false 的 JavaScript 逻辑，因此它将停止重定向。见下面的代码。

$('.like').on('click', function(event) {
    console.log("clicked the button");

    var id = '{{$yourId}}'

    $.ajax({
       method: 'POST',
       url: id + '/addlike'
    });

   return false;
});

控制器应该返回如下

return response()->json(['success' => 'Liked'],200);

【讨论】：