rails应用ajax之二:使用rails自身支持

考虑另一种情况：

1. 页面上半部分显示当前的所有用户，页面下半部分是输入新用户的界面；

2. 每当输入新用户时，页面上半部分会动态更新新加用户的内容；

我们还是用ajax实现，不过这次用rails内部对ajax的支持，其中在服务器端返回一个js脚本，然后在客户端执行。

新建user数据结构 rails g scaffold User name:string age:integer

接着应用数据库视图 rake db:migrate

修改index.html.erb的内容：

<h1>Listing Users</h1>

<ul id="users">
	<%= render @users%>
</ul>
<br />
<%= form_for(@user,remote:true) do |f|%>
	<%= f.label :name %><br &;
	<%= f.text_field :name %>
	<%= f.label :age %><br &;
	<%= f.text_field :age%>
	<%= f.submit %>
<% end %>

同时新建一个局部模板_users.html.erb：

<li><%= user.name%></li>
<li><%= user.age%></li>

接下来增加服务器端对js的支持，很简单：

  def index
    @users = User.all
    @user = User.new
    #puts "******* #{render @user} **********"
  end
  
  # POST /users
  # POST /users.json
  def create
    @user = User.new(user_params)

    respond_to do |format|
      if @user.save
        format.html { redirect_to @user,notice: 'User was successfully created.' }
        format.js {} #增加这一句
        format.json { render :show,status: :created,location: @user }
      else
        format.html { render :new }
        format.json { render json: @user.errors,status: :unprocessable_entity }
      end
    end
  end

别忘了还要写服务器端的js脚本哦。在view下的users目录中新建一个create.js.erb文件：

$("<%= escape_javascript(render @user)%>").appendTo("#users");
<!--$("#users").append("<p>love</p>");-->

首先用户访问users/index页面，当输入name和age点击提交后会进入create Action，其中的format.js一句提供了ajax支持，它会在浏览器端执行create.js.erb的内容：把新建用户信息异步动态插入页面上半部分。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!