以ajax方式在rails 3中提交表单（使用jQuery）
我是一个在rails和jQuery的初学者。 我在一个页面中有两个单独的表单，我想以ajax方式（使用jQuery）单独提交它们。 这是我得到了多less。 任何人都可以添加或修复这个代码，使其工作。 我正在使用Rails 3.1和jQuery 1.6。 先谢谢你。
的application.js
$(".savebutton").click(function() { $('form').submit(function() { $(this).serialize(); }); }); 第一种forms：
<%=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%>
第二种forms：
<%=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形状相同
你想要：
- 停止提交的正常行为。
- 通过ajax发送到服务器。
- 得到回复，并相应地改变事情。
下面的代码应该这样做：
$('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 helper。 默认情况下，rails 3.0.x使用原型js lib，但是可以使用jquery-rails gem（这是rails 3.1的默认选项）将其更改为jquery。 bundle install它，然后rails g jquery:install用jqueryreplace原型文件。
之后，你只需要处理callback。 看看这个截屏
在你的请求中，使用ajax停止beahavior默认，在你的form_for中发送remote：true是非常重要的
<%= form_for :session, url: sessions_path, remote: true, html: { class: "form-signin" } do |f| %> <% end %>
在你的阿贾克斯
$(".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模式库将通过远程数据提交表单，但我find了一个修复程序。
首先添加jQuery表单插件到您的资产javascript目录中： http : //malsup.github.io/jquery.form.js
现在重写表单的提交方法。 例如，你可以做这样的事情：
= 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); } }) }) })
