轨道上的阿贾克斯 4答案

【问题标题】：Ajax on rails 4轨道上的阿贾克斯 4
【发布时间】：2015-09-25 08:17:46
【问题描述】：

我有一个应用程序可以让用户喜欢帖子。当有人喜欢该帖子时，该帖子请求有效，但除非我刷新页面，否则视图不会更新。我坚持这个。这是我目前所拥有的：

Javascript

$('.favorite').on('click', function() {
  var $heart = $(this).find('.fa');
  $heart.removeClass('fa-heart-o').addClass('fa-heart');
  // POST request to server to create favorite in db
  $.post('/favorites', {
    favorite: { post_id: $(this).attr('data-id') }
  },
  function(data) {
    console.log(data);
  });
});

控制器

def create
  post = Post.find_by_id(favorite_params[:post_id])
  if current_user.favorite_posts.include? post
    render json: {}, status: :bad_request
  else
    @favorite = current_user.favorites.new(favorite_params)
    if @favorite.save
      render json: @favorite
    else
      render json: { errors: @favorite.errors.full_messages }, status: :unprocessable_entity
  end
end

结束

这是风景

<% if current_user.favorite_posts.include? post %>
  <span class="fa fa-heart"> <%= post.favorites.count %></span>
<% else %>
  <span class="fa fa-heart-o"> <%= post.favorites.count %></span>
<% end %>

感谢任何帮助。谢谢。

【问题讨论】：

更新视图的代码在哪里？
似乎没有要创建的收藏夹。当我阅读您的代码时，您还需要在 def create 中发送 favourite_params，而不仅仅是 post_id。你是怎么得到 favourite_params 的？请出示您的完整控制器。谢谢

标签： jquery ajax ruby-on-rails-4

【解决方案1】：

这样做：-

var new_count;
new_count = function() {
  # your script
};



$(document).ready(new_count);
$(document).on('page:load', new_count);

这个问题似乎是由于 turbolink checkthis

【讨论】：

感谢 Arv 的帮助！

【解决方案2】：

有两种解决方案：

使用浏览器内的 ajax 调用视图更改

使用 Rails UJS 功能在服务器上运行视图更改

我认为您最大的问题是您没有任何功能可以在成功请求后更改视图。上面的两个选项是你必须让它工作的，所以我会在这里为你详细介绍它们：

Ajax

Ajax 将为您发送请求；你仍然需要管理它的响应和功能：

$.post('/favorites', { favorite: { post_id: $(this).attr('data-id') }},
.done( function(data) {
  /* Manipulate your view here */
  $("span.fa").text(data);
  console.log("Success");
});

您必须记住，Ajax 只是一个异步请求。也就是说，Javascript 将像一个微型浏览器一样，代表您向服务器发送数据。

然后它将接收来自服务器的响应（大概包含您想要的数据）...然后使用这些数据操作您的视图是您的工作。

您可以使用的另一种方法涉及 Rails UJS 系统。也就是说，您可以在触发控制器操作后触发 javascript ERB 模板。

这将使您能够根据需要操纵视图，而无需编辑当前的 javascript：

$.post('/favorites', { favorite: { post_id: $(this).attr('data-id') }}
  .done( function(data) { console.log(data); });


#app/controllers/favourites_controller.rb
class FavouritesController < ApplicationController
   def create
     ...
     respond_to do |format|
        if @favorite.save
          format.js #-> invokes /views/favourites/create.js.erb
          format.json { render json: @favorite }
        else
          format.js
          format.json { render json: { errors: @favorite.errors.full_messages }, status: :unprocessable_entity }
  end
end

然后您就可以使用app/views/favourites/create.js.erb 来操作您的视图：

#app/views/favourites/create.js.erb
$("span.fa").hide();

【讨论】：

非常感谢 Rich。这真的很有帮助。它不喜欢“.done”部分，但是一旦我删除它，它就起作用了！周末愉快。

【解决方案3】：

代替

function(data) {
  console.log(data);
  });

您应该更新您的视图。您可能应该检查错误，如果没有，请使用 jQuery 选择器 $( "... span.fa" ).text(new_count) 更新您的 span 的内容。

使用这种方法，您可以将 new_count 的值计算为 (previous_count_in_the_span + 1)，但如果不会导致性能问题，您可能希望在响应中返回计数值。

【讨论】：

感谢 Dutow 的回复。