在Rails中，如何使用fetch异步创建DB条目

Question

我想要实现的目标

当用户单击竖起大拇指时，在数据库联接表likes(user_id, project_id)中，会创建一个条目来反映用户对项目的支持。除非用户之前已经对项目投了赞成票，否则计数会更新。

我希望一个简单的JS获取请求就可以了。不幸的是，它导致了500个错误。

home.html.erb

<div class="card" data-project-id='1'>
...
<span class="tag upvotes">👍 143</span>
...
</div>

application.js

...
document.addEventListener('turbolinks:load', () => {
...
const upvote = () => {
document.querySelectorAll('.tag.upvotes').forEach((tag) => {
tag.addEventListener('click', (e) => {
const project_id = e.target.closest('.card').dataset.projectId;
fetch(`projects/${project_id}/like/`, {
method: 'post'
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
});
});
}
upvote();
});

routes.rb

Rails.application.routes.draw do
...
post 'projects/:id/like', to: 'projects#like'
end

projects_controller.rb

class ProjectsController < ApplicationController
...
def like
@project = Project.find(params[:id])
@like = Like.create(user: current_user, project: @project) unless Like.where(user: current_user, project: @project)
render json: Like.where(project: @project).count.to_json
end
end

Answer 1

好吧，您的JSON响应会返回一个错误。你基本上是在写这样的2.to_json创建一个合适的JSON，比如：

{ number_of_linkes: Like.where(project: @project).count }.to_json

则在JS代码中写入data.number_of_likes