立即进行投票（Rails + MySQL + jQuery）答案

【问题标题】：Making upvotes happen instantly (Rails + MySQL + jQuery)立即进行投票（Rails + MySQL + jQuery）
【发布时间】：2015-02-05 19:39:03
【问题描述】：

我正在努力解决如何使用 Rails 和 jQuery 构建“upvote”流程，这样就最终用户而言，upvote 会立即发生。

首先，要定义 upvote，我的意思是就像您在 reddit 上所做的那样，点击向上箭头会记录对记录的投票，并增加一个计数器（YouTube 上的竖起大拇指是另一个示例）。

我正在为数据库使用 Rails 3.2、jQuery 和 MySQL。

现在我的流程是这样的：

在 html.erb 模板中，upvote 元素有一个 .js-remote-upvote 类，该类使用 jQuery 将其绑定到点击：

$('body').on('click', '.js-remote-upvote', function(e) { e.preventDefault(); e.stopPropagation(); $this = $(e.currentTarget); $.ajax({ type: $this.data('method') == "post" ? "POST" : "GET", url: $this.data('url') }) });
data-url 转到我的 UpvotesController 切换操作，该操作创建 upvote 记录，并处理其他一些杂项。东西。
toggle.js.erb 模板随后包含在 upvote 元素上添加 .active 类并递增计数器的 javascript 代码。

问题在于，无论我如何尝试在控制器中进行切换操作，它都会消耗一些时间（应用程序范围的 before_filters、跟踪等）。这导致最终用户不会立即感到赞成，当我们习惯于在 reddit 上立即进行赞成时，我认为这会导致糟糕的用户体验。

我是否以正确的方式思考这个问题？或者我应该增加计数器并立即设置.active css 类之前请求被传递给Rails？这对我来说感觉不对，因为控制器可能会抛出异常 - 基本上感觉 js 是“愚蠢的”，并且无论后端发生什么都会向用户显示即时的支持。

采用这种模式会不会不好？谢谢！

【问题讨论】：

我建议您显示该用户立即投票。这不是那种需要很多安全性的信息。如果下一页出现问题，请重新加载此投票消失，因此您不必担心有人会无限次投票

标签： javascript jquery html ruby-on-rails ruby-on-rails-3

【解决方案1】：

我做了同样的事情，但使用了一个技巧。作为软件开发人员，只有我们知道幕后发生的事情。所以无论你多么努力，你都必须存储upvote计数，点击@987654322 @,拥有incremted...等详细信息，然后也更新视图。

而不是转到服务器并更新数据库中的详细信息，然后更新视图..您可以首先更新/更改视图，然后使用 AJAX 移动到服务器，这对用户来说看起来很快。

首先良好的用户体验..FIRST 使用 jquery 更新视图代码，然后使用 ajax 从控制器调用更新投票的方法...至少对于用户而言，即时，而且您知道在幕后，它至少需要 2 秒...

查看文件中...

####update the count and also show that user has voted successfully by jquery
$('#image_up_<%= @image.id%>').html(function(i, val) { return val*1+1 });
$(".user_vote_status").html("You like this Image");

服务器端...更新详细信息并再次更新视图以进行确认

  def vote

  @image = Image.find(params[:id]) 
  ###method to add count by current user
  @image.vote_by_current_user(current_user.id,params[:type]) 
  ###code to update the count 
  ## reload to get latest count
  @image.reload

  respond_to :js
end

投票.js.erb

 $('#image_up_<%= @image.id%>').html("<%= @image.likes.size %>");
 //update the vote status on the page that user has liked/disliked the post
$(".user_vote_status").html("You like this Image");

【讨论】：