以ajax方式在rails 3中提交表单(使用jQuery)

Question

我是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%>

SchoolController

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的形状相同

Answer 1

你想要:

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
});

Answer 2

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

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

Answer 3

Rails 3中进行ajax表单提交的首选方法是使用Rails-ujs.

基本上你允许Rails-ujs为你做ajax提交(你不需要编写任何js代码).然后你只需编写js代码来捕获响应事件(或其他事件)并做你的事情.

这是一些代码:

首先,使用form_for中的远程选项,因此默认情况下将通过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
});

有几个事件可以挂钩.

Answer 4

要通过AJAX提交表单,您只需传递:remote => true给form_for帮助程序即可.默认情况下,rails 3.0.x使用原型js lib,但您可以使用jquery-railsgem 将其更改为jquery (这是rails 3.1的默认值).bundle install然后rails g jquery:install用jquery替换原型文件.

之后,您只需要处理回调.看看这个截屏视频