rails ajax

第一步:在要添加ajax的视图对应的controller中添加新动作并在routes中定义该动作的路由下一步link_to等要用到定位到该contreller的action，在添加的新动作用写ajax中view和数据库的数据存储的方式或定义局部界面要展示的数据变量， 或者ajax的操作是注册用户而资源就是User则在原有的动作create中操作ajax中view和数据库的数据存储的方式或定义局部界面要展示的数据变量即可，并找到该动作对应的路由下一步link_to等要用到定向到该controller的action中。

第二步:在视图中定义link_to（params只传递一个id时用） 或者 button_to（params只传递一个id时用） 或者 form_for(submit按钮， params传递一个表单时用) 或者 form_tag(submit按钮， params传递一个表单时用) 加关键字remote: true。 界面中点击该链接后跳转到相应controller

第三步:界面中点击该链接按钮后跳转到相应controller的action，并按照action中的代码进行数据库和view中数据的交互操作， 或者拿到局部界面要展示的数据变量，进行完action动作后，action自动跳转到同名的js.erb文件（注：ajax的action中没有重定向redirect_to）（这个文件在controller对应的view文件夹中定义， 如果不是ajax则action动作执行完之后如果有重定向redirect_to则重定向到该页面, 如果没有则自动跳转到和该action同名的controller对应的view文件夹中的.html.erb视图中）

第四步:跳转到js.erb文件后执行该文件中的js代码， 进行跳转到局部试图页面进行刷新（在原视图中定义id即在原始图要局部刷新的部分的id）(如果semantic UI和bootstrap的弹出层，则原视图要刷新的id可以随便定义位置， js跳转时候要加入对应框架的代码)。（注意跳转到的局部视图页面名字以下划线开头_）

###如果只刷新局部视图的数据到这就为止了， 如果由弹出层再传回数据来更新数据库则往下看再做一个ajax操作

第五步:在controller中定义action并在action中定义数据操作， 并定义路由下一步link_to等要用到 

第六步:在局部试图中定义link_to， button_to, form_for, form_tag等加关键字remote:true， 点击局部视图的按钮后， 跳转到action进行数据操作

第七步:数据操作完后action定向到和其同名的js.erb文件中执行js代码， 这里的js代码是对弹出层的隐藏hide()

###到此弹出层的两个ajax操作就执行完了

ajax渲染局部视图动作流程：视图中点击remote:true属性按钮， 跳转到对应controller的action中定义数据操作和要在局部视图展示的变量， 执行完后自动找到action同名.js.erb文件其中js代码跳转到要渲染的局部试图（只是渲染则局部视图应该是已经写好的， 只传action中重新定义的要展示变量）中进行局部视图的渲染（也就是更新要展示的数据）

ajax弹出层（渲染加保存数据）动作流程：试图中点击remote:true属性按钮， 跳转到对应controller中的第一个定义的action中进行数据操作和要在局部视图展示的变量， 执行完后自动找到第一个action同名的.js.erb文件其中js代码（由相应的弹出层操作）跳转到姚渲染的局部试图中进行局部试图渲染， 如果弹出层要接受表单数据则定义form_for. form_tag表单加remote:true关键字和要定向到controller中第二个action的路径， 弹出层中填好数据点确定按钮找到第二个action进行数据的保存操作， 执行完第二个action后， 跳转到第二个action的同名.js.erb文件中进行隐藏弹出层操作。

semantic UI弹出层两个ajax操作实例：

第一步：定义第一个action和路由

rooms_controller.rb中:

def add_subject_to_room

end

routes.rb中：

post '/rooms/add_subject_to_room/:id' => 'rooms#add_subject_to_room', :as => 'add_subject_to_room'

第二步:在要做ajax操作的页面加由关键字remote:true的link_to, button_to（manage_add_subject_to_room_path(room)即为上一步定义的第一个action路由）， 和要渲染的位置的标签的id（如果是弹出层则随便在哪定义标签都可以）

index.html.erb中：

<%= button_to "update Subject", manage_add_subject_to_room_path(room), remote: true, class: "ui button" %>

<div id="placeholder"></div>(如果是弹出层这句随便在哪)

第三步：在第一个action中定义要展示的数据变量

rooms_controller.rb中:

  def add_subject_to_room
    @room = Room.find_by(number: params[:id])
    @subjects = Subject.all
  end

第四步：第一个action结束后自动跳转到同名.js.erb文件中，定义该js文件中要跳转到的局部视图（其中由调出弹出层的操作）

add_subject_to_room.js.erb中：

$("#placeholder").html('<%= j(render(partial: "manage/rooms/subject", locals: {room: @room})) %>');(这里的locals定义的room是第一个action要展示的变量@room的别名可以直接在局部试图中用， 防止多个action用一个局部视图名字冲突)
$("#placeholder-modal").modal("show", {detachable: false});(senmantic UI的弹出层调出的操作，id是在局部视图中定义的)

第五步：定义第二个action， 和对应的路由

rooms_controller.rb中：

def update_subject

end

routes.rb中:

post '/rooms/update_subject/:id' => 'rooms#update_subject', :as => 'update_subject'

第六步:定义局部视图的代码， 按照相应框架弹出层的布局来定义。定义跳转到第二个anction路径的form_tag并加关键字remote:true

_subject.html.erb中：

<div class="ui modal" id="placeholder-modal">
  <div class="header">Choose room's subject</div>
    <div class="content">
      <%= form_tag  "/manage/rooms/update_subject/#{@room.id}", remote: true, class: "nifty_form" do%>
        <% @subjects.each do |subject| %>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" name="room[<%= subject.subject_type %>]" value="1"  <%= 'checked' if Subject.find_by(subject_type: subject.subject_type).rooms_subjects.find_by(room_id: room.id) %> />
              <label><%= subject.subject_type %></label>
            </div>
          </div>
        <% end %>
        <%= submit_tag "approve", class: "ui button" %>
      <% end %>
    </div>
  </div>
</div>

第七步：第二个action中的数据保存操作

rooms_controller.rb中：

  def update_subject


      @types_params = []
      @types = Subject.all.inject([]){|sum, a| sum << a.subject_type}
      params[:room].each {|key, value| @types_params << key}


      params[:room].each do |key, value|
        if !Subject.find_by_subject_type(key).rooms_subjects.find_by_room_id(params[:id]).present?
          Subject.find_by_subject_type(key).rooms_subjects.create(room_id: params[:id])
        end
      end


      @types_difference = @types - @types_params


      @types_difference.each do |key|
        @types_difference_find = Subject.find_by_subject_type(key).rooms_subjects.find_by_room_id(params[:id])
        if @types_difference_find.present?
          @types_difference_find.delete
        end
      end
  end

第八步: 第二个action执行完之后， 跳转到同名 .js.erb文件中在该文件中定义隐藏弹出框的操作

update_subject.js.erb中：

$('#placeholder-modal').modal("hide");（semantic UI的隐藏弹出层操作）
$('#placeholder-modal').remove(); （因为senmantic UI的弹出层由一个拷贝所以用remove()来全部移除， ****如果没有弹出层只是个局部视图要隐藏这个.js.erb文件中只加一个.hide()动作即可）