以Ajax方式在Rails 3中提交表单（使用jQuery）

我是Rails和jQuery的初学者。我在一页中有两个单独的表单，我想以ajax方式（使用jQuery）分别提交。这就是我走了多远。任何人都可以添加或修复此代码以使其正常工作。我正在使用Rails 3.1和jQuery 1.6。先感谢您。

application.js

$(".savebutton").click(function() { 
    $('form').submit(function() {
         $(this).serialize();
    });
}); 

第一种形式：

<%=form_for :users do |f| %>
  <fieldset>
    <legend>Basic details</legend>
    <%= f.label :school %>
    <%= f.text_field :school,:size=>"45",:class=>"round",:id=>"school" %><br/>      
  </fieldset>
  <p><%= button_to "save and continue",{:class=>"savebutton"} %></p>
<%end%>

第二种形式：

<%=form_for :courses do |c| %>
  <fieldset>
    <legend>Your current classes</legend>
    <label>class:</label><%= c.text_field :subject,:size=>"45",:class=>"round" %><br/>
  </fieldset>
  <p><%= button_to "save and continue",{:class=>"savebutton"} %></p>
<%end%>

学校负责人

class SchoolController < ApplicationController
  respond_to :json
  def create
    @school = current_user.posts.build(params[:school].merge(:user => current_user))
    if @school.save
      respond_with @school
    else
      respond_with @school.errors, :status => :unprocessable_entity
    end
  end
end

CourseController与SchoolController的形状相同

你想要：

1. 停止提交的正常行为。
2. 通过ajax将其发送到服务器。
3. 收到回复并相应地进行更改。

下面的代码应该这样做：

$('form').submit(function() {  
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
    }).success(function(json){
        console.log("success", json);
    });
    return false; // prevents normal behaviour
});

如果您:remote => true在表单上使用，则可以使用JavaScript提交

$('form#myForm').trigger('submit.rails');

在Rails 3中进行Ajax表单提交的首选方法是利用Rails-ujs。

基本上，您允许Rails-ujs为您完成ajax提交（并且您无需编写任何js代码）。然后，您只需编写js代码来捕获响应事件（或其他事件）并执行您的操作即可。

这是一些代码：

首先，在form_for中使用remote选项，因此默认情况下，表单将通过ajax提交：

form_for :users, remote:true do |f|

然后，当您要基于ajax响应状态（例如，成功响应）执行某些操作时，请编写如下的javscript逻辑：

$('#your_form').on('ajax:success', function(event, data, status, xhr) {
  // Do your thing, data will be the response
});

有几个事件，你可以钩住。

要通过AJAX提交表单，您可以将其传递:remote => true给form_for助手。默认情况下，rails 3.0.x使用原型js库，但您可以将其更改为带有jquery-railsgem的jquery （rails 3.1的默认设置）。bundle install然后rails g jquery:install使用jquery替换原型文件。

之后，您只需要处理回调即可。看看这个截屏

在您使用ajax的请求中停止行为默认值非常重要，在form_for中发送remote：true

<%= form_for :session, url: sessions_path, remote: true, html: { class: "form-signin" } do |f| %>

<% end %>

在你的ajax中

$(".form-signin").on("submit", function(e) {
    $.ajax({
        url: $(this).attr('action'),
        data: $(this).serialize(),
        type: "POST",
        dataType: "json",
        success: function(response) {
            console.log(response)
        },
        error: function(xhr, textStatus, errorThrown) {}
    });
    e.preventDefault(); //THIS IS VERY IMPORTANT
});

这里对我没有任何帮助，我的问题是，如果我调出一个模态窗口，则jQuery模态库会使我的表单无法通过远程数据提交，但我找到了解决方法。

首先将jQuery Form插件添加到资产javascript目录中：http : //malsup.github.io/jquery.form.js

现在，为您的表单覆盖Submit方法。例如，您可以执行以下操作：

= form_for @object, html: {class: "ajax_form_submit"}, authorization_token: true do |f|
  = f.text_input

javascript:

  $(document).on('ready page:load', function() {

    $(".ajax_form_submit").submit(function () {
      var form = $(this)
      form.ajaxSubmit({
        success: function (responseText, statusText, xhr) {
          console.log('success: ajax_form_submit')
        },
        error: function (jqXHR, statusText, errorThrown) {
          console.log('error: ajax_form_submit');
          console.log(jqXHR, statusText, errorThrown);
        }
      })
    })

  })