您的位置：NetBeans->NetBeans Ruby on Rails中使用Ajax(二)

NetBeans Ruby on Rails中使用Ajax(二) 2008-04-30 来自：java060515  [收藏到我的网摘]

本教程以《建立Rails模型间的关系》一文为基础。如果已经学完该教程，那么您可以使用在该教程中构建的项目直接阅读下一节。否则，下载RubyWebLogModel.zip文件并遵循这些步骤创建示例数据库。
添加Ajax支持

在项目中添加Ajax支持的第一步是包含JavaScript库（Prototype和script.aculo.us）。这些库都绑定在Ruby on Rails中。Prototype库为Ruby on Rails中的Ajax实现提供基本类库，而script.aculo.us库提供的可视效果可以添加到应用程序中。

1. 展开Views > Layouts并打开blog.rhtml文件。

2. 将以下代码行添加到stylesheet_link_tag行下面。

<%= javascript_include_tag :defaults %> 这行代码包含JavaScript库（Prototype和script.aculo.us），这两个库都绑定在Ruby on Rails中。下一步需要创建一个form_remote_tag来触发Ajax动作。

3. 打开show.rhtml文件。删除现有的form_tag（执行HTTP POST），并使用以下form_remote_tag（执行XMLHTTPRequest）替换它。

<% form_remote_tag :url => {:action => "post_comment"} do %> 这行代码触发blog.controller.rb文件中post_comment Ajax动作。现在，当读者提交评论时，仍然会重新加载整个页面。使用form_remote_ tag并包含Javascript库之后，页面将不再发送提交请求。程序现在寻找某些Javascript进行执行，但我们尚未编写这些Javascript代码。然而，如果强行刷新页面，您可以验证评论已经被添加。

4. 展开Controllers节点并打开blog_controller.rb文件。

5. 滚动到post_comment动作并用以下代码替换现有的redirect_to方法调用。

代码示例3：render方法调用

render :update do |page| page.insert_html :bottom, 'comments', :partial => 'comment' page[:comment_comment].clear flash.keep(:post_id)end


以上代码将_comment.rhtml partial动态插入到评论

标记的底部。将post_id保存在缓存中非常重要，否则，用户插入的任何附加评论的post_id都为零，从而变成孤立评论（评论表中没有定义任何参照完整性）。

6. 运行项目并验证评论已动态更新。

进阶：应用可视效果

之前在项目中包含的script.aculo.us库可以提供可视效果。您可以用它来增强应用程序的外观和式样。此处，我们将应用效果高亮显示博客中的最新评论。应用此效果后，您可以很容易地学习和尝试script.aculo.us库中的其它效果。

1. 打开_comment.rhtml文件，并将下以粗体显示的id属性添加到已有

标记中。

代码示例4：确定最新评论的代码

>


这行代码用于标记您将要应用视觉效果的评论。

2. 切换到blog_controller.rb文件，将以下代码添加到render :update提供的代码块的末尾。

page["comment_#{@comment.id}"].visual_effect :highlight, :duration => 3.5 3. 选择File > Save All，然后刷新浏览器（此操作为必需，这样Rails才能生成用于处理可视效果的Javascript代码并将其发送到浏览器）。添加一条评论，您会发现新评论将高亮显示。

- java060515的专栏 - CSDNBlog

推荐人评论

在项目中添加Ajax支持的第一步是包含JavaScript库（Prototype和script.aculo.us）。这些库都绑定在Ruby on Rails中。Prototype库为Ruby on Rails中的Ajax实现提供基本类库，而script.aculo.us库提供的可视效果可以添加到应用程序中。

用户评论

正在载入评论列表...