Ajax Forms

3.4. Ajax Forms

来看看Ajax表单，我们所需要做的工作就是把form_tag 换成form_remote_tag来转换响应的方式并且给响应留出插入的位置来：

<%form_remote_tag :update=>"reverse" ,:url=>{:action=>"reverse"} do%>

  <label>Text to reverse:</label>

<%=text_field_tag :text_to_reverse%>

<%=submit_tag "Reverse"%>

 

<%end%>

 

<div id="reverse"></div>

这段代码里的option内容看起来非常眼熟，因为它跟link_to_remote的option的内容一样。:update选项指明了Ajax响应后更新HTML元素，:url提供了Ajax响应的URL。试着在浏览器中运行一下这个新表单，你会得到下图所示的这样：

好像跟我们预期的效果不太一样。

Layout被呈现了两次，问题就在于每个action（这里是reverse）会默认的呈现layouts/application.rhtml模板。为了指定版面的显示（或者关闭layout），在action里需要清楚的声明：

def reverse

  @reversed_text = params[:text_to_reverse].reverse

  render :layout => false

end

加上这行，再回到浏览器，刷新下，看看结果，现在跟我们的预期是一样的了。

对于这个响应结果form_remote_tag使用了Prototype的Ajax.Updater，就像link_to_remote中的一样。

<form action="/chapter3/reverse" method="post"

   onsubmit="new Ajax.Updater('reversed','/chapter3/reverse',

     {asynchronous:true, evalScripts:true,

      parameters:Form.serialize(this)});

     return false;">

 

和onclick截获link行为一样，onsubmit截获form提交的行为。

 

form_for（用来创建模型对象对应的表单）的Ajax副本是remote_form_for.使用remote_form_for和form_for差不多，只是要加上一些包含Ajax选项的hash，例如:update和:complete

本文转自 fsjoy1983 51CTO博客，原文链接：http://blog.51cto.com/fsjoy/91355，如需转载请自行联系原作者