我是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 endendCourseController與SchoolController的形狀相同
3 回答
紫衣仙女
TA貢獻1839條經驗 獲得超15個贊
你想要：
停止提交的正常行為。
通過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
});
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
如果您:remote => true在表單上使用，則可以使用JavaScript通過以下方式提交它們：
$('form#myForm').trigger('submit.rails');
FFIVE
TA貢獻1797條經驗 獲得超6個贊
在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
});
有幾個事件，你可以鉤住。
- 3 回答
- 0 關注
- 514 瀏覽
添加回答
舉報
0/150
提交
取消