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

问题:如何编写我的rails应用程序,以便在提交表单或单击链接时,可以通过AJAX触发部分视图加载?

必须有几件事才能使它工作,包括:remote =>触发元素上的true标志,控制器的类定义中的respond_to:js标志,路由,部分视图以及最后实际渲染动态部分的jQuery必须包含在单独的.html.js文件中。
以下示例是“someajax”控制器的虚构“render_partial_form”方法。

1)添加一个:remote =>触发元素的真实标志
把:remote =>您的.html.erb文件(视图)中您要触发AJAX调用的元素的链接或表单标签上的true标志,例如

<%= 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);

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...