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

来源：互联网发布：注册登录源码编辑：程序博客网时间：2024/05/21 19:48

考虑另一种情况：

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的内容：把新建用户信息异步动态插入页面上半部分。

0 0