Ruby on rails 如何使用AJAX在Rails中执行POST操作

情景

我创建了一个简单的应用程序来学习Rails和Bootstrap。这个应用程序的作用是，它允许用户给名人起绰号，并且喜欢这些绰号。你可以在

我有一个链接到按钮，用于在我的主页/index.html.erb中发布名人的喜好，如下所示：

<%= link_to home_updatelike_path(id: nickname.id, search: @search ), method: :post, remote: true, class: "update_like btn btn-xs btn3d pull-right" do %>
    <i class="glyphicon glyphicon-thumbs-up"></i>
<% end %>

myupdatelike.js.erb中的代码如下：

$('.update_like').bind('ajax:success', function() {

});

现在，我想要实现的是在不重新加载页面的情况下提交一个like

问题:

每当我按下按钮，数据库操作就完成了，但是除非我重新加载，否则更改不会反映在页面中。请引导我完成这个noob问题，并提供指向资源的链接，这些资源解释了如何将AJAX与Rails结合使用

编辑

这是整个主页/index.html.erb

<div class="jumbotron col-md-6 col-md-offset-3">
    <h1 class='text-center'>Nicknamer</h1>
</div>

<div class="container">

        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 bottom50">
                <%= form_tag(root_path, :method => "get", id: "search-form", type: "search") do %>
                <div class = "form-group" >
                    <div class = "col-sm-9  " >
                        <%= text_field_tag :search, params[:search], placeholder: "Name", class: "form-control" %>
                    </div>
                    <div class = "col-sm-3" >
                        <%= submit_tag "Search", class: "btn btn-default btn-block btn-success"%>
                    </div>
                </div>
                <% end %>
            </div>
        </div>

        <% @names.each do |name| %>
        <div class="col-md-6 col-xs-8 col-md-offset-3 col-xs-offset-2 bottom50">

            <!-- ===== vCard Navigation ===== -->
            <div class="row w">
                <div class="col-md-4">
                    <% if name.sex == true %>
                        <%= image_tag("mal.jpg", :alt => "", class: "img-responsive") %>    
                    <% else %>
                        <%= image_tag("fem.jpg", :alt => "", class: "img-responsive") %>    
                    <% end %>
                </div><!-- col-md-4 -->

            <!-- ===== vCard Content ===== -->
                <div class="col-md-8">
                    <div class="row w1">
                        <div class="col-xs-10 col-xs-offset-1">
                        <h3><%= "#{name.name}" %></h3>
                        <hr>
                        <h5>Also known as</h5>

                            <% name.nicknames.each do |nickname| %>
                                <div class = "row w2 bottom10">
                                    <% if nickname.name_id == name.id %>
                                        <div class="col-xs-7">
                                            <%= nickname.nickname %>
                                        </div>
                                        <div class="col-xs-3 text-right">
                                            <%= pluralize(nickname.likes.count, 'like') %>
                                        </div>
                                        <div class="col-xs-1">
                                            <%= link_to home_updatelike_path(id: nickname.id, search: @search ), method: :post, remote: true, class: "update_like btn btn-xs btn3d pull-right" do %>
                                            <i class="glyphicon glyphicon-thumbs-up"></i>
                                            <% end %>
                                        </div>                                      
                                    <% end %><!-- if -->
                                </div><!-- row w2 -->   
                            <% end %><!-- do -->

                            <div class = "row w3 bottom30">
                            <%= form_for @addnickname, as: :addnickname, url: {action: "addnickname"} do |f| %>
                                <div  class = "form-group" >
                                    <%= f.hidden_field :name_id, :value => name.id %>
                                    <%= f.hidden_field :search, :value => @search %>
                                <div class = "col-xs-9">
                                    <%= f.text_field :nickname , :required => true, class: "form-control" %>
                                </div>
                                <div class = "col-xs-3">
                                    <%= f.submit "Add", class: "btn btn-default btn-info"%>
                                </div>
                                </div>
                            <% end %>
                            </div>

                        </div><!-- col-xs-10 -->
                    </div><!-- row w1 -->
                </div><!-- col-md-8 -->
            </div><!-- row w -->
        </div><!-- col-lg-6 -->
        <% end %>
    </div><!-- /.container -->

class HomeController < ApplicationController
  def index
    @addnickname = Nickname.new
    if params[:search]
        @search = params[:search]
        @names = Name.search(params[:search])
    else
        @names = Name.all
    end
  end

  def addnickname
    @addnickname = Nickname.new(:nickname => params[:addnickname][:nickname], :name_id => params[:addnickname][:name_id])

    if @addnickname.save
      redirect_to root_path("utf8"=>"✓", "search"=>params[:addnickname][:search], "commit"=>"Search")
    else
      render :new
    end
  end

  def updatelike
       @like = Like.new(:nickname_id => params[:id], :ip_address => request.remote_ip)
       @like.save

     respond_to do |format|
      format.html { redirect_to root_path("utf8"=>"✓", "search"=>params[:search], "commit"=>"Search") }
      format.json { head :no_content }
      format.js   { render :layout => false }
    end
    end

private
  def addnickname_params
    params.require(:addnickname).permit(:name_id, :nickname, :search)
  end
end

昵称
“获取”，id:“搜索表单”，键入：“搜索”）do%>
“”类：“img响应”）%>
“”类：“img响应”）%>

也称为
name.id%>
@搜索%>
true，类：“窗体控件”%>

这是整个家庭控制器。rb

<div class="jumbotron col-md-6 col-md-offset-3">
    <h1 class='text-center'>Nicknamer</h1>
</div>

<div class="container">

        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 bottom50">
                <%= form_tag(root_path, :method => "get", id: "search-form", type: "search") do %>
                <div class = "form-group" >
                    <div class = "col-sm-9  " >
                        <%= text_field_tag :search, params[:search], placeholder: "Name", class: "form-control" %>
                    </div>
                    <div class = "col-sm-3" >
                        <%= submit_tag "Search", class: "btn btn-default btn-block btn-success"%>
                    </div>
                </div>
                <% end %>
            </div>
        </div>

        <% @names.each do |name| %>
        <div class="col-md-6 col-xs-8 col-md-offset-3 col-xs-offset-2 bottom50">

            <!-- ===== vCard Navigation ===== -->
            <div class="row w">
                <div class="col-md-4">
                    <% if name.sex == true %>
                        <%= image_tag("mal.jpg", :alt => "", class: "img-responsive") %>    
                    <% else %>
                        <%= image_tag("fem.jpg", :alt => "", class: "img-responsive") %>    
                    <% end %>
                </div><!-- col-md-4 -->

            <!-- ===== vCard Content ===== -->
                <div class="col-md-8">
                    <div class="row w1">
                        <div class="col-xs-10 col-xs-offset-1">
                        <h3><%= "#{name.name}" %></h3>
                        <hr>
                        <h5>Also known as</h5>

                            <% name.nicknames.each do |nickname| %>
                                <div class = "row w2 bottom10">
                                    <% if nickname.name_id == name.id %>
                                        <div class="col-xs-7">
                                            <%= nickname.nickname %>
                                        </div>
                                        <div class="col-xs-3 text-right">
                                            <%= pluralize(nickname.likes.count, 'like') %>
                                        </div>
                                        <div class="col-xs-1">
                                            <%= link_to home_updatelike_path(id: nickname.id, search: @search ), method: :post, remote: true, class: "update_like btn btn-xs btn3d pull-right" do %>
                                            <i class="glyphicon glyphicon-thumbs-up"></i>
                                            <% end %>
                                        </div>                                      
                                    <% end %><!-- if -->
                                </div><!-- row w2 -->   
                            <% end %><!-- do -->

                            <div class = "row w3 bottom30">
                            <%= form_for @addnickname, as: :addnickname, url: {action: "addnickname"} do |f| %>
                                <div  class = "form-group" >
                                    <%= f.hidden_field :name_id, :value => name.id %>
                                    <%= f.hidden_field :search, :value => @search %>
                                <div class = "col-xs-9">
                                    <%= f.text_field :nickname , :required => true, class: "form-control" %>
                                </div>
                                <div class = "col-xs-3">
                                    <%= f.submit "Add", class: "btn btn-default btn-info"%>
                                </div>
                                </div>
                            <% end %>
                            </div>

                        </div><!-- col-xs-10 -->
                    </div><!-- row w1 -->
                </div><!-- col-md-8 -->
            </div><!-- row w -->
        </div><!-- col-lg-6 -->
        <% end %>
    </div><!-- /.container -->

class HomeController < ApplicationController
  def index
    @addnickname = Nickname.new
    if params[:search]
        @search = params[:search]
        @names = Name.search(params[:search])
    else
        @names = Name.all
    end
  end

  def addnickname
    @addnickname = Nickname.new(:nickname => params[:addnickname][:nickname], :name_id => params[:addnickname][:name_id])

    if @addnickname.save
      redirect_to root_path("utf8"=>"✓", "search"=>params[:addnickname][:search], "commit"=>"Search")
    else
      render :new
    end
  end

  def updatelike
       @like = Like.new(:nickname_id => params[:id], :ip_address => request.remote_ip)
       @like.save

     respond_to do |format|
      format.html { redirect_to root_path("utf8"=>"✓", "search"=>params[:search], "commit"=>"Search") }
      format.json { head :no_content }
      format.js   { render :layout => false }
    end
    end

private
  def addnickname_params
    params.require(:addnickname).permit(:name_id, :nickname, :search)
  end
end

class HomeControllerparams[：add昵称][：昵称]，：name\u id=>params[：add昵称][：name\u id]）
if@addnickname.save
重定向到根路径（“utf8”=>”✓", "搜索“=>参数[：add昵称][：搜索]，“提交”=>“搜索”）
其他的
渲染：新
结束
结束
def更新类
@like=like.new（：昵称\u id=>params[：id]，：ip\u地址=>request.remote\u ip）
@喜欢。保存
回应待办事项|格式|
format.html{重定向到根路径（“utf8”=>”✓", "搜索“=>参数[：搜索]，“提交”=>“搜索”）}
format.json{head:no_content}
format.js{render:layout=>false}
结束
结束
私有的
def add昵称参数
参数require（：add昵称）.permit（：name\u id，：昵称，：search）
结束
结束

好的，因此您需要一种方法来识别需要更改的div编号：

<div class="col-xs-3 text-right">
  <%= pluralize(nickname.likes.count, 'like') %>
</div>

这将生成一个具有

id

的

div

，如

昵称_1

（如果昵称的id为1）

现在，在javascript模板中，您可以轻松地将需要更新的div作为目标：

$("nickname_#{@like.nickname.id}").html(@like.nickname.likes.count);

---

这里不需要

ajax:success

绑定，因为您正在呈现一个javascript模板。在模板中，您可以访问控制器中设置的实例变量，就像从HTML模板中访问一样。上面的代码旨在用新的计数替换包含likes计数的div的内容。

Hello sixty4bit，我添加了完整的index.html.erb和home_controller.rb，如果需要，您可以查看它们