用 ajax 方式在 Rails3中提交表单(使用 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 的形状是一样的

83982 次浏览
小开
最佳答案

你想:

  1. 停止服从的正常行为。
  2. 通过 ajax 发送到服务器。
  3. 得到一个回复，并相应地改变事情。

The code below should do that:

$('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
});
小开

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

之后你只需要处理回调，看看 这个的视频

小开

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

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

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

基本上，您允许 Rails-ujs 为您执行 ajax 提交(并且您不需要编写任何 js 代码)。然后您只需编写 js 代码来捕获响应事件(或其他事件)并执行您的操作。

下面是一些代码:

首先，使用 form_for中的 遥控器选项，这样表单将默认通过 ajax 提交:

form_for :users, remote:true do |f|

Then when you want to do some action based on ajax response status (e.g. successful response), write the javscript logic like this:

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

有 一些事件，你可以挂钩到。

小开

在使用 ajax 的请求中非常重要，停止默认行为，在 form _ for 中发送 remote: true

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


<% end %>

in your 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 模态库会阻止我通过远程数据提交表单，但是我找到了一个修复方法。

First add the jQuery Form Plugin to your assets javascript directory: 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);
}
})
})


})

提交答案