我已经有一个带有普通 HTTP post 的表单。现在,我想使用 jQuery Ajax 请求重写此表单。这是我所拥有的:
register_user.html.erb
<%= form_tag :action=> "register_user" %>
<label for="user_id_1">user_id_1:</label><br/>
<%= text_field "user", "user_id_1", :size => 20 %>
<label for="user_id_2">user_id_2:</label><br/>
<%= text_field "user", "user_id_2", :size => 20 %>
<%= submit_tag "Submit" %>
users_controller.rb
def register_user
#do something
end
所以,我试图关注 this教程,但无法按照我的应用程序中的相同说明进行操作。那么有什么建议吗?如何使用上面的表单进行 jQuery Ajax 调用?
据我所知,application.js(包含在register_user.html.rb头中的文件)文件将是
jQuery.ajaxSetup({
'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this;
};
$(document).ready(function() {
$("#new_review").submitWithAjax(); #WHAT SHOULD REPLACE #new_review?
})
但是,如何将提交操作与表单关联起来?我是 JS、jQuery 和 Rails 的新手。
更新1
Rails 2.3.8
更新2
<%= form_tag :action=> "register_user" , :html => {:id => "register_user" }%>
请求未进入
jQuery.fn.submitWithAjax = function() { }
方法。如何在同一页面上显示
@final_value
数据?
现在,这是我显示该值的代码(在 register_user.html.erb
中):
<%=
if @final_value != nil
"<h2>The Output is " + @final_value.to_s</h2>" +
end
%>
感谢各位的热心帮助!
最佳答案
你在 Rails 3 上吗? Rails3 支持不显眼的 javascript (UJS)。查看文件 public/javascripts/rails.js
它是如何工作的?
要创建远程表单,请执行以下操作:
<%= form_tag :action=> "register_user", :remote => true %>
这会向您的表单添加一个数据远程属性。
现在,rails 内置的 UJS 会挂载并为您执行 onsubmit 操作。它会触发如下事件:
ajax:之前,ajax:完成,ajax:成功,ajax:失败,ajax:之后
Rails 默认使用原型(prototype)而不是 jQuery,因此您可以(不必)用 jQuery 替换原型(prototype)。阅读 http://www.railsinside.com/tips/451-howto-unobtrusive-javascript-with-rails-3.html
现在重要的是,您可以在表单上捕获这些事件!为您的表单提供一个 id 来识别它:
<%= form_tag :action=> "register_user", :remote => true, :html => { :id => 'myform' } %>
现在 Hook 事件(使用 jQuery),如下所示:
jQuery(document).ready(function() {
jQuery('#myform').bind('ajax:complete', '', function(request) {
alert("I got: " + request.responseText);
});
});
您还可以 Hook 其他事件,例如 ajax:failure 等。
编辑
对于 Rails 2.3.8(确保您已包含 Rails 默认 js 文件)
注意如果您只想使用jquery并删除默认包含的原型(prototype)库,您可以使用jRails(用jQuery替换原型(prototype)):http://github.com/aaronchi/jrails
我不知道你的@final_value是什么,所以我做了一个通用的例子:
您认为:
<h2 id="myoutput">
<% if @final_value != nil %>
<%= @final_value.to_s %>
<% end %>
</h2>
<% form_remote_tag :url => { :action=> "register_user" } do %>
<label for="user_id_1">user_id_1:</label><br/>
<%= text_field "user", "user_id_1", :size => 20 %>
<label for="user_id_2">user_id_2:</label><br/>
<%= text_field "user", "user_id_2", :size => 20 %>
<%= submit_tag "Submit" %>
<% end %>
在你的 Controller 中:
def register_user
form_data = params['user']
if form_data.is_a?(Hash)
@final_value = form_data['user_id_1']
end
respond_to do |format|
format.html
format.js do
render :update do |page|
page.replace_html 'myoutput', @final_value
page.visual_effect :highlight, 'myoutput'
end
end
end
关于jquery - 在 Rails 应用程序中使用 jQuery 进行 Ajax 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3688589/