制作一个异步的帖子请求laravel来处理点赞

Question

目前我正在处理这样的点赞：

    class LikeController extends Controller
    {
        public function like(Post $post)
        {
            $attributes = [
                ['user_id', '=', auth()->user()->id],
                ['post_id', '=', $post->id]
            ];
            $like = Like::where($attributes);
            if($like->exists()) {
                $like->delete();
            } else {
                Like::create(['user_id' => auth()->user()->id, 'post_id' => $post->id]);
            }
            return redirect()->to(url()->previous());
        }
    }

我有一条路线：

    Route::post('like/{post}', [LikeController::class, 'like']);

我不喜欢的是，每次点击点赞都会发送一个新的请求，页面会刷新到顶部，所以我添加了这个javascript，以便在点击点赞时滚动回上一个位置：

    $(window).on("scroll", function(e) {
        $.cookie("tempScrollTop", $(window).scrollTop());
    });
    
    $(".like-form").each(function() {
        $(this).submit(function(e) {
            $.cookie("action", 'like', {path: '/'});
        })
    });
    
    $(window).on("load", function (e) {
        if ($.cookie("tempScrollTop") && $.cookie('action') === 'like') {
            $(window).scrollTop($.cookie("tempScrollTop"));
            $.cookie("action", '', {path: '/'});
        }
    })

这一切都很好，但我仍然不喜欢在点击点赞按钮时看到页面刷新。有没有办法让post请求异步和/或让它在后台运行，这样当点击类似按钮时，页面不会刷新，但类似的内容会被发送到服务器？否则，实现这一结果的正确方法是什么？

谢谢你，任何帮助都将不胜感激！

Answer 1

您可以通过jQuery进行Ajax请求，也可以使用Livewire。

以下是一个如何制作Livewire Like按钮的好博客：https://rappasoft.com/blog/building-a-like-button-component-in-laravel-livewire

Answer 2

您不应该在api中使用重定向，而应该实现只返回成功消息的ajax请求。

        public function like(Post $post)
        {
            // ...
            return response()->json("Post successfuly liked"); // Or you could return the Post, or Like object if you want.
        }

在前端，当调用该路由时，您可以处理响应，例如递增计数器：

    $(".like-form").each(function() {
        $(this).submit(function(event) {
            // call the api here, and then handle the response through a callback
            // ex: 
            fetch(`${API_URL}/post/like`).then(response => 
                // do something, like querying the dom element for its value and incrementing it.
            )
        });
    });

Answer 3

如果AJAX请求重新加载页面是问题所在，那么简单应用event.preventDefault()将修复此

$(".like-form").each(function() {
    $(this).submit(function(event) {
        event.preventDefault();
    }
}

---

FYI-检查此参考Laravel 9表单提交使用Ajax示例教程