Rails通过ajax提交表单并更新视图

我想通过ajax更新表单提交而不重新加载页面并根据它更新视图。 我尝试了不同的方法，并因为我对rails的新手而失败了。

这是情况。

在模态中

def new @new_entry = current_user.notes.build @words = current_user.notes @notes_false_list = current_user.notes.where(known: false).order("title").group_by { |note| note.title[0] } @notes_true_list = current_user.notes.where(known: true).order("title").group_by { |note| note.title[0] } end 

在视图中的表单代码。

  {:class => 'home-form without-entry clearfix'} do |f| %>    

创建动作

 def create @new_note = current_user.notes.build(new_note_params) if @new_note.save @notes_list = current_user.notes.count unless @new_note.user.any_entry @new_note.user.toggle!(:any_entry) if @notes_list >= 50 redirect_to root_url end else redirect_to root_url end end 

最后在视图中我想改变

花了很多时间用AJAX更新它，但每次都失败了。 有没有帮助？ 提前致谢。

Answer 1

你的代码很好，但对于ajax ，

1. 你需要在表单中添加remote=true 。

   <%= form_for(@image,:html=>{:id=>"your_form_id",:multipart => true,:remote=>true}) do |f |%>

2. 此外，在您的服务器端， 您需要在views/users/show_updated_view.js.erb 创建一个js.erb文件，以回复浏览器作为其js调用和非HTML调用，因此需要向用户显示发生的事情（表单提交后的成功/错误（如果是users_controller ），

所以在你的行动中，你需要这样的东西： –

  respond_to do |format| format.js { render 'users/show_updated_view'} end 

3. 在show_updated_view.js.erb ，您应该通过隐藏整个表单/重置表单或用新div替换表单来更新您的视图以便用户知道视图已更新或表单已成功提交更新..或任何直观的东西。虽然有很多方法:)。

   //在这里，我正在用带有消息的div替换整个表单

   $("#your_form_id").html("

   You have submitted the form successfully.

   ") ;

视图的名称可以是任何东西，但您需要处理成功和失败。

Answer 2

使用AJAX要记住的是，您不会重定向请求（通常），您只需生成一些文本以发送回浏览器。 AJAX基本上只是javascript从浏览器获取一些文本并用它做一些事情。 通常，你会想要替换页面的一部分，即用你得到的文本替换html标签及其内容，在这种情况下你希望文本是一些html。 在rails中渲染一大块html的方法是渲染部分，所以你这样做，你经常也做一些javascript告诉浏览器如何处理文本，通常用一个具有特定id的元素替换文本。

 def create @new_note = current_user.notes.build(new_note_params) if @new_note.save @notes_list = current_user.notes.count unless @new_note.user.any_entry @new_note.user.toggle!(:any_entry) if @notes_list >= 50 end end respond_to do |format| format.html { redirect_to root_url } format.js #default behaviour is to run app/views/notes/create.js.erb file end end 

这里的respond_to块允许你以不同的方式处理html和js（例如ajax）请求。

app / views / notes / create.js.erb可能有类似的东西

 page.replace "foo", :partial => "app/views/notes/bar" 

Answer 3

尝试在控制器操作“create”和相应的create.js.erb中添加respond_to块 ，并在创建操作后添加要执行的js，并发布您在浏览器控制台或rails上发现的任何错误服务器控制台，我们可以帮助您找到出错的地方

Answer 4

这是一篇关于使用Rails进行AJAX的简短文章 。 有几点需要注意：

1. 在form_for添加remote: true 。
2. 在控制器中包含format.js ，以便它将呈现create.js.erb 。

3. 在create.js.erb中 ，执行以下操作（未测试）：

   $("p.instructions").innerHTML("<%= @notes_list %>")