Rails 4 使用 ajax、jquery、:remote => true 和 respond_to 渲染部分

使用 AJAX 动态渲染页面以响应提交的表单似乎很常见。其他类似的问题都没有集中于如何以一般方式做到这一点。

我能找到的关于这个主题的最好的博客文章在这里：http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

问题：如何对 Rails 应用程序进行编码，以便在提交表单或单击链接时可以触发通过 AJAX 加载的部分视图？

要使其工作，必须存在几件事，包括触发元素上的 :remote => true 标志、控制器类定义中的 respond_to :js 标志、路由、部分视图，最后是实际渲染动态的 jquery部分必须包含在单独的 .html.js 文件中。

下面的示例适用于“someajax”控制器的虚构“render_partial_form”方法。

1）向触发元素添加 :remote => true 标志
将 :remote => true 标志放在 .html.erb 文件（视图）中要触发 AJAX 调用的元素的链接或表单标记上，例如

<%= form_tag("/someajax", method: 'post', :remote => true) do %>

当 :remote => true 时，rails 不会自动切换视图，而是允许运行 JQuery。这可以与 form_tag、link_tag 或其他类型的标签一起使用。

2) 在控制器顶部添加“respond_to :html, :js”

在控制器类定义的顶部，您现在必须指定控制器可以响应 javascript 以及 html：

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

在此示例中，有一个变量从控制器传递到视图中：名为的选择列表选项数组@array_from_controller.

3) 将 http 动词路由到控制器的方法

由于我想要一个 POSTed 表单来触发 AJAX 调用，因此我将控制器的 post 动词路由到 render_partial_form 视图。

post 'someajax' => 'someajax#render_partial_form

控制器方法定义为def render_partial_form与视图名称匹配，_render_partial_form.html.erb因此无需从控制器调用渲染操作。

4）创建局部视图
分部视图应与控制器方法具有相同的名称，并以下划线开头：_render_partial_form.html.erb

<h3>Here is the partial form</h3>

<%= form_tag("/next_step", method: 'post') do %>
    <%= label_tag(:data, "Some options: ") %>
    <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %>
    <%= submit_tag('Next') %>
<% end %>

5）创建JQuery文件

JQuery 语句触发表单的呈现。将“render_partial_form”替换为控制器方法和分部视图的实际名称。 SlideDown 效果是可选的“养眼效果”。 创建一个扩展名为 .js.erb 的文件，并与控制器同名：

render_partial_form.js.erb

$('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>");
$('#render_partial_form').slideDown(350);