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

前端之家收集整理的这篇文章主要介绍了rails应用ajax之二:使用rails自身支持前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

考虑另一种情况:

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

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

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

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

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

修改index.html.erb的内容

  1. <h1>Listing Users</h1>
  2.  
  3. <ul id="users">
  4. <%= render @users%>
  5. </ul>
  6. <br />
  7. <%= form_for(@user,remote:true) do |f|%>
  8. <%= f.label :name %><br \>
  9. <%= f.text_field :name %>
  10. <%= f.label :age %><br \>
  11. <%= f.text_field :age%>
  12. <%= f.submit %>
  13. <% end %>

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

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

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

  1. def index
  2. @users = User.all
  3. @user = User.new
  4. #puts "******* #{render @user} **********"
  5. end
  6. # POST /users
  7. # POST /users.json
  8. def create
  9. @user = User.new(user_params)
  10.  
  11. respond_to do |format|
  12. if @user.save
  13. format.html { redirect_to @user,notice: 'User was successfully created.' }
  14. format.js {} #增加这一句
  15. format.json { render :show,status: :created,location: @user }
  16. else
  17. format.html { render :new }
  18. format.json { render json: @user.errors,status: :unprocessable_entity }
  19. end
  20. end
  21. end

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

  1. $("<%= escape_javascript(render @user)%>").appendTo("#users");
  2. <!--$("#users").append("<p>love</p>");-->
@H_502_52@ 基本完成鸟。整个流程大体如下:

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

猜你在找的Ajax相关文章