使用Ajax在Rails中更新部分内容

Question

我是一名Rails初学者，目前正在尝试创建一个简单的表单，该表单需要输入姓名、电子邮件和电话号码，然后当您点击提交按钮时，使用Ajax更新页面以显示您输入的信息。

例如，如果您在表单的文本字段中输入User、[e-mail]和555-555-555，并单击提交按钮，则应该得到以下结果：

姓名：User 电子邮件：[e-mail] 电话号码：555-555-555

我知道这是一个简单的问题，但我不太确定如何编写JavaScript代码来使其正常工作。

以下是我的部分代码：

<%= form_for(@user, :remote => true) do |f| %>

Name: <div="Name"><%= f.text_field :name %></div>
Email: <div="Email"><%= f.text_field :email %></div><br/>
Phone Number: <div="Phone Number"><%= f.text_field :phone_number%></div><br/>
<%= f.submit "Submit" %>

我的控制器看起来像这样：

class UsersController < ApplicationController

def new
    @user = User.new
end

def create
    @user = User.new(params[:user])
end
end

在我的create.js.erb文件中，我是否使用.update函数来替换文本字段中输入的信息，或者我需要做其他事情？

- tkrishnan

Answer 1

如果你将表单包裹在一个 div 中，以后就可以轻松地替换其内容：

<div id="theform">
<%= form_for(@user, :remote => true) do |f| %>

Name: <div="Name"><%= f.text_field :name %></div>
Email: <div="Email"><%= f.text_field :email %></div><br/>
Phone Number: <div="Phone Number"><%= f.text_field :phone_number%></div><br/>
<%= f.submit "Submit" %>
</div>

然后在你的create.js.erb文件中：

$("#theform").html("<%= escape_javascript(render partial: "users/user", locals: {user: @user}) %>");

在你的/app/views/users/_user.html.erb文件中

Name: <%= user.name%> Email: <%= user.email%> Phone Number: <%= user.phone%>

- Jesse Wolgamott

---

非常感谢，那个方法很有效！接下来我需要更多地了解如何在Rails中使用Ajax，但再次感谢！！ :) - tkrishnan

Answer 2

你需要在表单中设置remote为true，并让控制器响应JS。

视图：

<%= form_for(@user, :remote => true) do |f| %>
  Name: <div="Name"><%= f.text_field :name %></div>
  Email: <div="Email"><%= f.text_field :email %></div><br/>
  Phone Number: <div="Phone Number"><%= f.text_field :phone_number%></div><br/>
<%= f.submit "Submit" %>

控制器：

class UsersController < ApplicationController

  def create
    @user = User.new(params[:user])
    @user.save
    respond_to do |format|
      flash[:notice] = "saved successful"
      format.js # new.js.erb 
    end
  end
end

并创建一个名为new.js.erb的新文件，其中包含ajax代码，并根据需要使用嵌入式ruby语法

$('div#my_id').html('<%= @user.name%> - <%= @user.phone %>');
$('div#notice').html('<%= flash[:notice] %>');

- Pedro Medeiros