在Rails应用程序中使用jQuery调用Ajax

Question

我已经有一个普通HTTP帖子的表单.现在,我想重写这个表单,使用jQuery Ajax请求.这是我有的:

register_user.html.erb

<%= form_tag :action=> "register_user" %>
                               <label for="user_id_1">user_id_1:</label><br/>
                               <%= text_field "user", "user_id_1", :size => 20 %> 
                               <label for="user_id_2">user_id_2:</label><br/>
                               <%= text_field "user", "user_id_2", :size => 20 %>
<%= submit_tag "Submit" %>

users_controller.rb

def register_user

   #do something

end

所以,我试图按照本教程,但无法在我的应用程序中遵循相同的说明.那有什么建议吗？如何使用上面的表单进行jQuery Ajax调用？

AFAIK,application.js(register_user.html.rb头文件中包含的文件)文件将是

jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#new_review").submitWithAjax(); #WHAT SHOULD REPLACE #new_review?
})

但是,如何将提交操作与表单相关联？我是JS,jQuery和Rails的新手.

更新1

Rails 2.3.8

更新2

<%= form_tag :action=> "register_user" , :html => {:id => "register_user" }%>

1. 请求不在jQuery.fn.submitWithAjax = function() { }方法中.

2. 如何@final_value在同一页面上显示数据？

现在,这是我显示值(in register_user.html.erb)的代码:

    <%=
    if @final_value != nil
        "<h2>The Output is " + @final_value.to_s</h2>" + 
    end
     %>

谢谢你真棒的帮助!

Answer 1

你是铁轨3吗？Rails3支持不引人注目的javascript(UJS).查看文件public/javascripts/rails.js

它是如何工作的？

要创建远程表单,请执行以下操作:

<%= form_tag :action=> "register_user", :remote => true %>

这会向表单添加数据远程属性.

现在rails内置的UJS挂钩并为您提供onsubmit的东西.它会触发以下事件:

ajax:之前,ajax:完成,ajax:成功,ajax:失败,ajax:之后

Rails默认使用原型而不是jQuery,所以你可以(不必)用jQuery替换原型.阅读http://www.railsinside.com/tips/451-howto-unobtrusive-javascript-with-rails-3.html

现在重要的是,您可以在表单上捕获这些事件!为您的表单添加ID以识别它:

<%= form_tag :action=> "register_user", :remote => true, :html => { :id => 'myform' } %>

现在挂钩事件(使用jQuery),如下所示:

jQuery(document).ready(function() {
    jQuery('#myform').bind('ajax:complete', '', function(request) {
        alert("I got: " + request.responseText);
    });
});

你也可以挂钩其他事件,如ajax:failure等.

编辑

对于Rails 2.3.8(确保你已经包含rails默认的js文件)

注意如果你只想使用jquery并删除默认包含的原型库,你可以使用jRails(用jQuery替换原型):http://github.com/aaronchi/jrails

我不知道你的@final_value是什么,所以我做了一个通用的例子:

在你看来:

<h2 id="myoutput">
  <% if @final_value != nil %>
    <%= @final_value.to_s %>
  <% end %>
</h2>


<% form_remote_tag :url => { :action=> "register_user" } do %>

  <label for="user_id_1">user_id_1:</label><br/>
  <%= text_field "user", "user_id_1", :size => 20 %> 
  <label for="user_id_2">user_id_2:</label><br/>
  <%= text_field "user", "user_id_2", :size => 20 %>

  <%= submit_tag "Submit" %>

<% end %>

在你的控制器中:

def register_user

  form_data = params['user']

  if form_data.is_a?(Hash)
    @final_value = form_data['user_id_1']
  end

  respond_to do |format|
    format.html
    format.js do

      render :update do |page|
        page.replace_html 'myoutput', @final_value
        page.visual_effect :highlight, 'myoutput'
      end

    end
end