jquery - 在 Rails 应用程序中使用 jQuery 进行 Ajax 调用

Question

我已经有一个带有普通 HTTP post 的表单。现在，我想使用 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

所以，我试图关注 this教程，但无法按照我的应用程序中的相同说明进行操作。那么有什么建议吗？如何使用上面的表单进行 jQuery Ajax 调用？

据我所知，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数据？

现在，这是我显示该值的代码(在 register_user.html.erb 中):

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

感谢各位的热心帮助!

Answer 1

你在 Rails 3 上吗？ Rails3 支持不显眼的 javascript (UJS)。查看文件 public/javascripts/rails.js

它是如何工作的？

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

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

这会向您的表单添加一个数据远程属性。

现在，rails 内置的 UJS 会挂载并为您执行 onsubmit 操作。它会触发如下事件:

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

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

现在重要的是，您可以在表单上捕获这些事件!为您的表单提供一个 id 来识别它:

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

现在 Hook 事件(使用 jQuery)，如下所示:

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

您还可以 Hook 其他事件，例如 ajax:failure 等。

编辑

对于 Rails 2.3.8(确保您已包含 Rails 默认 js 文件)

注意如果您只想使用jquery并删除默认包含的原型(prototype)库，您可以使用jRails(用jQuery替换原型(prototype)):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 %>

在你的 Controller 中:

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