Rails中的ajax运用1---评论

转载 2017年01月03日 17:00:31

通过前面8篇文章的学习, 我们已经基本掌握了如何快速开发一个简单的博客应用程序, 本章作为入门的完结篇, 我们将要学习来为博客加上ujs, 让我们的博客加上一点ajax效果.

 

ujs全称Unobtrusive Javascript, 这也是Rails3的重要特性之一. Rails3的ujs利用了HTML5中 data-*@ 属性的巨大优势, 而摒弃了以前基于Prototype JS的构造器. (在rails1和rails2中, 我们使用ajax可能会利用 xxx.rjs 或者 xxx.js.builder, 在里面可以使用封装prototype的Page对象)

 

1. 让Rails3使用jQuery

轻量级js框架jquery相信大家一定不会陌生, 本教程中的ujs教程也是基于jquery来写的(当然你也可以使用prototype).

首先, 下载最新的jquery然后放入 public/javascripts 文件夹下面:

 

curl -L http://code.jquery.com/jquery-1.4.3.min.js > public/javascripts/jquery.js

 

同时我们也需要把原来的prototype ujs的rails.js 改成 jquery-ujs的rails.js:

 

$ curl -L http://github.com/rails/jquery-ujs/raw/master/src/rails.js > public/javascripts/rails.js

 

下载后可以看下javascripts文件夹, 里面有application, controls, dragdrop, effects, jquery, prototype 以及 rails 等js文件, 出来jquery以外, 其他都是生产bolg应用时rails加进去的.

 

现在打开 config/application.rb 文件, 修改下面的配置:

 

 

Ruby代码  收藏代码
  1. # JavaScript files you want as :defaults (application.js is always included).  
  2.     config.action_view.javascript_expansions[:defaults] = %w(jquery rails)  

 

上面的代码告诉rails, :default 符号的定义现在改成 jquery和rails啦, 启动我们的博客程序, 查看源代码中的<head>中的<script>是不是这3个js脚本.

 

2. 给评论加上ujs

当用户发表评论后, 浏览器往往会刷新页面, 那么使用ajax方式提交可以实现局部刷新, 从而避免数据交互开销以及增加客户体验.

 

现在我们修改 views/comments/_form.erb:

 

Html代码  收藏代码
  1. <%= form_for([@post, @post.comments.build], :remote=>true) do |f| %>  
  2. ...  

 

 :remote=>true告诉rails, 该表单将使用xmlhttprequest方式提交数据.

 

接着, 我们修改 CommentsController下面的create动作:

 

Ruby代码  收藏代码
  1. class CommentsController < ApplicationController  
  2.   before_filter :authenticate:only => :destroy  
  3.   respond_to :html:js:xml  
  4.     
  5.   def create  
  6.     @post = Post.find(params[:post_id])  
  7.     @comment = @post.comments.build(params[:comment])  
  8.     respond_with @comment if @comment.save  
  9.   end  
  10.   
  11.   ...  
  12. end  

 

还记得先前教程中的 respond_to 声明吗? 如果评论保存成功, rails将寻找相应的模板, 如果存在 create.html.erb 将渲染html, 如果存在 create.js.erb 当渲染js.

 

那么现在我们可以在 views/comments/下面创建 create.js.erb 模板了:

 

Js代码  收藏代码
  1. $('#comments').append("<%= escape_javascript(render @comment) %>"); // 插入 _comment 局部模板  
  2. $('#comment_body').val(""); // 清空表单  

 

 很熟悉? 是的, 完全就是jquery的写法, 只不过我们使用了一个 escape_javascript 来生成一段无<script>标记的代码.

 

现在, 我们需要修改下 Posts/ 下面的show.html.erb 模板:

 

Html代码  收藏代码
  1. <h2>Comments</h2>  
  2. <div id="comments">  
  3.     <%= render @post.comments %>  
  4. </div>  

 

 

好了, 现在试试吧.

 

3. 删除文章和评论

最后我们试着把 删除post以及评论 也加上ujs效果:

posts/index.html.erb:

 

Html代码  收藏代码
  1. <% @posts.each do |post| %>  
  2.   <tr id='<%= "post_#{post.id}" %>'>  
  3.     <td><%= post.name %></td>  
  4.     <td><%= post.title %></td>  
  5.     <td><%= post.content %></td>  
  6.     <td><%= link_to 'Show', post %></td>  
  7.     <td><%= link_to 'Edit', edit_post_path(post) %></td>  
  8.     <td><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete, :remote => true %></td>  
  9.   </tr>  
  10. <% end %>  

PostsController#destroy:

   def destroy

Ruby代码  收藏代码
  1. @post = Post.find(params[:id])  
  2. @post.destroy  
  3. respond_with(@post)  
 

 添加 views/posts/destroy.js.erb:

 

Js代码  收藏代码
$('#post_<%= @post.id %>').hide(); //隐藏删除的记录.

rails书籍展示添加游客评论

需求:给图书表添加评论功能,类似豆瓣图书评论,book.rb:class CreateBooks < ActiveRecord::Migration def change create_t...
  • napoay
  • napoay
  • 2016年01月09日 18:02
  • 1051

asp+ajax打造无刷新新闻评论系统

  • 2007年08月25日 18:37
  • 83KB
  • 下载

asp.net-Ajax无刷新评论

  • 2009年04月23日 16:17
  • 77KB
  • 下载

Rails3 Ajax 笔记

Rails3 Ajax 笔记 Posted on 2011/07/25 by zetachang 最近都在忙Rails app 的网页前端,也花了点时间摸索Rails 下的Ajax。 ...

jQuery_AJAX 无刷新评论

  • 2012年06月11日 19:32
  • 56KB
  • 下载

Rails 3.2 的 Ajax 向导

Rails 3.2 的 Ajax 向导 前不久入手了《Web开发敏捷之道》的中文第4版,翻看了 Ajax 部分,发现竟然还是使用 .rjs 模板。.rjs 模板在 3.1 版以后已经被移除。另外...
  • assyer
  • assyer
  • 2013年01月27日 20:29
  • 724

ASP+AJAX无刷新评论提交

  • 2009年04月26日 22:58
  • 52KB
  • 下载

Ajax仿腾讯心情评论源码

  • 2010年05月17日 17:43
  • 1.07MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Rails中的ajax运用1---评论
举报原因:
原因补充:

(最多只允许输入30个字)