ajax ruby,在Ruby on Rails中使用AJAX的教程
如果没有听说过 Rails,那么欢迎您外星旅行归来,近几年大概只有那个地方没有听说过 Ruby on Rails 了。Rails 最吸引人的地方是能够很快地建立功能完备的应用程序并运行起来。Rails 为 Ajax 而内置集成的 Prototype.js 库可以轻松快速地创建所谓的富 Internet 应用程序。
本文将逐步引导您创建 Rails 应用程序。然后深入分析如何利用 Ajax 特性编写从服务器上读写数据的 JavaScript 代码。
从容起步 Ajax 之旅——Ajax 技术资源中心
什么是 Ajax?Ajax(Asynchronous JavaScript and XML)是一种编程技术,它允许结合 XML 和 JavaScript 用于 Web 应用程序,从而打破页面刷新的范式,使您的用户快速方便的与 Web 应用程序交互。
您想了解如何构建基于 Ajax 的应用吗?developerWorks 中国网站上有非常多的关于 Ajax 的文章、教程和技巧,通过“Ajax 技术资源中心”,您可以非常快捷地找到能帮助您完成与 Ajax 相关的应用开发的技术参考资源。
关于 Rails 的一点说明
那么到底什么是 Rails 呢?Rails 是建立在 Ruby 编程语言上的一种 Web 应用程序平台。Ruby 存在大约有 10 年了。和 Perl 以及 Python 一样,它也是一种开放源码的敏捷编程语言,完全支持面向对象编程。
Rails 作为一种应用程序框架,强调使用正确的 Web 应用程序模式,即模型-视图-控制器(MVC)。在这里,系统的模型部分通常用一组映射到数据库表的 ActiveRecord 对象表示。控制器部分是一个 Ruby 类,其方法可以对模型执行各种操作。视图一般就是通过 ERB 模板(ERB 是 Ruby 内置的文本模板包)生成的超文本标记语言代码(HTML),形式上和 PHP 或 JavaServer Pages(JSP)代码生成的 HTML 类似。视图也可以是可扩展标记语言(XML)、文本、JavaScript 代码、图片或者其他东西。
用户从 Rails Web 应用程序请求页面时,URL 通过路由系统发送,后者将请求发送给控制器。控制器从模型请求数据并发送给视图完成格式化。
创建 Rails 应用程序时,系统自动生成一些目录和基本文件。包括随系统安装的 JavaScript 文件目录(包括 Prototype.js 库)、视图、模型和控制器目录,甚至还有存放从其他开发人员那里下载的插件的目录。
开始使用 Rails
创建 Rails 应用程序最简单的办法就是使用一个预先打好包的 Rails 系统。如果平台是 Microsoft? Windows?,建议您使用 Instant Rails。在 Macintosh 机器上我非常喜欢 Locomotive 2 应用程序。这些应用程序都包括 Rails 框架、Ruby 语言、Web 服务器和 MySQL。下载了这么多东西(确实是这样)之后,创建 Rails 应用程序仅仅是举手之劳了。
本文将创建一个新的菜谱应用程序,称为Recipe,只需要一个表。清单 1 显示了 Recipe 应用程序的数据库迁移。
清单 1. 数据库迁移
class CreateRecipes < ActiveRecord::Migration
def self.up
create_table ( :recipes, :options => 'TYPE=InnoDB' ) do |t|
t.column :name, :string, :null => false
t.column :description, :text, :null => false
t.column :ingredients, :text, :null => false
t.column :instructions, :text, :null => false
end
end
def self.down
drop_table :recipes
end
end
数据库中只有一个表:recipes。包含五个字段:name、description、ingredients、instructions,还有一个字段是 Rails 基础设施自动维护的唯一标识符。
建立好数据库表之后,接下来就要为它包装一个 ActiveRecord 对象。该对象如 清单 2 所示。
清单 2. Recipe 模型
class Recipe < ActiveRecord::Base
validates_presence_of :name
validates_presence_of :description
validates_presence_of :ingredients
validates_presence_of :instructions
end
ActiveRecord 基类负责所有基本的数据库访问:查询表、插入、更新和删除记录。这里只要为每个字段增加验证就够了。我告诉 Rails 每个字段不能为空。
Ajax 表单
创建 Recipe 应用程序的第一步是向数据库中添加菜谱。首先介绍在 Rails 中创建基本 HTML 表单的标准方法。如 清单 3 中的 RecipesController 类所示。
清单 3. Recipes_controller.rb
class RecipesController < ApplicationController
def add
@recipe = Recipe.new
if request.post?
@recipe.name = params[:recipe][:name]
@recipe.description = params[:recipe][:description]
@recipe.ingredients = params[:recipe][:ingredients]
@recipe.instructions = params[:recipe][:instructions]
@recipe.save
end
end
end
只有一个方法 add,它首先创建一个空的 Recipe 对象。然后当客户机发出请求时添加参数并保存数据。
该页面的 ERB 模板如 清单 4 所示。
清单 4. Add.rhml
Name | |
Description | 3 %> |
Ingredients | 3 %> |
Instructions | 3 %> |
页面首先显示 recipe 对象的错误消息。如果用户发布的数据没有通过 Recipe 模型对象的验证就会设置这些消息。然后依次为
标记、每个字段的 text_field 和 text_area 项、 标记和表单末尾。
这是非常标准的 Rails。安全可靠,可用于各种浏览器,清晰地映射到为客户机创建的 HTML。但我需要的是 Web 2.0,就是说 Ajax。那么,该如何修改呢?
控制器端的 add() 方法彻底变了,如 清单 5 所示。
清单 5. Recipes_controller.rb
class RecipesController < ApplicationController
def add
end
def add_ajax
Recipe.create( { :name => params[:recipe][:name],
:description => params[:recipe][:description],
:ingredients => params[:recipe][:ingredients],
:instructions => params[:recipe][:instructions] } )
end
end
add() 方法不再做任何事,因为有一个新的方法 add_ajax() 处理客户机返回的数据。
对于模板来说,不需要做大的修改,如 清单 6 所示。
清单 6. add.rhtml 的开始部分
{ :action => 'add_ajax' },
:complete => 'document.forms[0].reset();',
:update => 'counter' %>
Name |
文件开始在 HTML 中增加了 head 部分,其中包含对 Rails 默认 JavaScript 文件的引用。这就是 Prototype.js 系统,完成 Ajax 工作的大部分。
然后添加了
最后,将原来的 start_form_tag 改为 form_remote_tag。form_remote_tag 有几个参数,其中最重要的是 url,它指定向何处发送数据。第二个是一个完整的处理程序,其中的 JavaScript 代码在 Ajax 请求完成时执行。这里重置表单以便让用户输入新的菜谱。然后使用 update 参数告诉 Rails 把 add_ajax 动作的输出发送到何处。
add_ajax() 方法还需要一个模板。如 清单 7 所示。
清单 7. Add_ajax.rhtml
recipes now in database
如此而已。但并不完全是。这仅仅是从标准 HTML 表单迁移到 Rails 中的 Ajax 表单。图 1 显示了准备提交的 Ajax 表单。
图 1. Ajax 表单
接下来是更加动态的交互,比如使用 Ajax 动态搜索。
Ajax 动态搜索
Prototype.js 提供了观察页面上的字段和表单的功能。我利用这种功能观察一个文本字段,可在其中输入部分菜谱名。然后运行 RecipesController 的搜索方法,输出放在文本字段下方的
清单 8. Recipes_controller.rb
class RecipesController < ApplicationController
...
def index
end
def search_ajax
@recipes = Recipe.find( :all,
:conditions => [ "name LIKE ?",
"%#{params[:recipe][:name]}%" ] )
render :layout=>false
end
end
index() 方法呈现 HTML 表单。search_ajax() 方法根据搜索参数查找菜谱并把数据发送给 ERB 模板格式化。index.rtml 模板如 清单 9 所示。
清单 9. Index.rhtml
'search_form' } %>
0.5,
:update => 'recipe',
:url => { :action => 'search_ajax' } %>
在 清单 9 的开头同样包括了 JavaScript 库。然后创建一个具有搜索字段和
search_ajax.rhtml 表单的代码如 清单 10 所示。
清单 10. Search_ajax.rhtml
由于搜索结果可能有多项,循环遍历菜谱列表并输出其名称和说明。
当在浏览器中打开该站点并在地址栏中输入 apple 的时候,我找到了苹果馅饼的做法,如 图 2 所示。
图 2. Ajax 动态搜索
这就是最简单的实现。但如果希望进一步了解苹果馅饼该如何做?可以使用 Ajax 在需要时动态获得配料和做法吗?很高兴您这样问!当然能!
在命令中增加内容
有时候,让用户选择下载更多的信息而不是生硬地把信息堆到页面上更加友好。传统上,Web 应用程序开发人员使用隐藏的
清单 11 中的菜单模板增加了 link_to_remote() 辅助方法调用。
清单 11. Search_ajax.rhtml
:url => { :action => 'get_extra_ajax', :id => r.id },
:update => "extra_#{r.id}" %>
link_to_remote() 在页面中添加 JavaScript 代码和包含指定文本的 anchor()标记。客户单击该链接时,页面就会发出 Ajax 请求来获得新内容并替代原来的文本。
为了获得新的信息,必须为 RecipesController 添加一个 get_extra_ajax() 方法。如 清单 12 所示。
清单 12. Recipes_controller.rb
class RecipesController < ApplicationController
...
def get_extra_ajax
@recipe = Recipe.find( params[:id] )
render :layout=>false
end
end
此外还需要一个模板 get_extra_ajax.rhtml 来格式化这些信息。清单 13 显示了该模板。
清单 13. Get_extra_ajax.rhtml
现在回到页面并输入 apple,将看到 图 3 所示的结果。
图 3. 增加了可以访问配料及做法的链接
单击该链接时,浏览器使用 Ajax 从 Web 服务器检索额外的资料并显示在那个位置。结果如 图 4 所示。
图 4. 菜谱的细节
如果有一个行项或细节类型的报告,这种 Ajax 模式非常方便,因为请求每个记录的细节可能非常耗时,最好在需要的时候再请求。此外这种技术也有助于节约屏幕资源。
可能最热门的 Web 2.0 特性是自动完成文本字段。否则 这趟 Ajax 之旅怎么能算完整呢?
自动完成字段
Rails 使得构建自动完成字段极其简单。首先要在 index.rhtml 模板中增加一些东西。修改后的版本如 清单 14 所示。
清单 14. 修改后的 index.rhtml
div.auto_complete {
width: 300px;
background: #fff;
}
div.auto_complete ul {
border: 1px solid #888;
margin: 0px;
padding: 0px;
width: 100%;
list-style-type: none;
}
div.auto_complete ul li {
margin: 0px;
padding: 3px;
}
div.auto_complete ul li.selected {
background-color: #ffb;
}
div.auto_complete ul strong.highlight {
color: #800;
margin: 0px;
padding: 0px;
}
'search_form' } %>
'off' %>
:url => { :action=>'autocomplete_recipe_name' },
:tokens => ',' %>
...
文件上方的级联样式表(CSS)部分用于自动完成字段的下拉列表。此外还对 text_field 略做修改关闭浏览器的自动完成机制。下拉列表中的项放在新增的
RecipesController 的 autocomplete_recipe_name() 方法搜索该名称,如 清单 15 所示。
清单 15. Recipes_controller.rb
class RecipesController < ApplicationController
...
def autocomplete_recipe_name
@recipes = Recipe.find( :all,
:conditions => [ "name LIKE ?",
"%#{params[:recipe][:name]}%" ] )
render :layout=>false
end
end
还需要一个 ERB 模板建立列表,如 清单 16 所示。
清单 16. Autocomplete_recipe_list.rb
自动完成系统查找一个 HTML 列表(
- ),其中每个列表项都是一个 option。使用 index.rhtml 页面的 CSS (或者您提供的样式表)格式化。
为了查看自动完成的效果,在浏览器中打开页面,然后输入 test。我在 test 菜谱中加入了一些数据。结果如 图 5 所示。
图 5. 下拉自动完成列表
可以使用上下箭头键选择一个选项然后按 Enter 键选择。这样将把选择的内容复制到文本字段中。
非常灵活,感谢 Rails 体系结构,它使这很容易实现。
结束语
无需讳言,我喜欢 Rails。从使用它的那一刻起我就被它深深吸引了。就我所见,Web 的很多开发人员都被它吸引了。为什么不呢?Rails 使得创建高交互性的 Web 应用程序易如反掌。
即使您还没有开始编写 Rails 应用程序,我也建议您下载 Instant Rails 或 Locomotive 应用程序开始尝试一下。您将体会到很多乐趣,并学习到很多可用于 Java? PHP 或 Microsoft .NET 应用程序的东西。也许您会发现您希望一直编写 Rails 代码。
ajax ruby,在Ruby on Rails中使用AJAX的教程相关推荐
- wordpress api ajax,Woocommerce rest api - 在wordpress中通过ajax创建产品
嗯,问题在这里.我创建了一个本地项目,用于在远程服务器上的wordpress中安装Woocommerce中的产品.我的本地项目的代码是这样一个Woocommerce rest api - 在wordp ...
- jquery ajax循环调用,每个循环jQuery中的Ajax调用
这是一个函数,我必须通过ajax调用写入一个xml文件.该代码在第一次进行ajax调用时工作正常.在每个循环的第二个循环中,ajax调用完全没有进行.我不知道为什么.我指定asyn为false.这没有 ...
- Ajax 01客户端和服务器 | jQuery中的ajax | 服务端接口
Ajax -网络编程 客户端和服务器的基本概念 上网的目的 获取和消费(使用)资源 客户端和服务器(服务端) 客户端: 使用服务的计算机 如果一台计算机希望成为客户端,必须安装浏览器 服务端: 提供服 ...
- html ajax实现分页代码,用jQuery中的ajax分页实现代码
功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请 ...
- Ruby入门之零基础如何学ruby以及ruby的应用/快速学习ruby/学习ruby的流程是什么?...
作者:李路 链接:https://www.zhihu.com/question/19552402/answer/22336708 来源:知乎 快速学习Ruby on Rails,这应该是个伪命题,没有 ...
- java中使用ajax请求数据格式化,ajax请求服务器返回json数据格式化
JQuery--实现Ajax应用 实现Ajax应用 1 .load()异步请求数据,通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,调用格式为load(url,[data], ...
- 【Ajax】了解Ajax与jQuery中的Ajax
一.了解Ajax 什么是Ajax Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML). 通俗的理解:在网页中利用 XMLHtt ...
- Ajax(jQuery封装),表单form提交(Ajax),art-template模板引擎,原生Ajax,XML和JSON,axios,跨域和JSONP,防抖和节流,HTTP协议
目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
- Ruby系统中的AJAX开发技术简析
一. Ajax的简短历史 在短短几个月内,Ajax从一种十分模糊稀罕的技术一下变成最热门的 东西.本文将介绍极其容易使用的Ajax支持-作为Ruby on Rails web应用程序框架的一部分实现. ...
- 在Ruby on Rails中对nil v。空v。空白的简要解释
我发现自己一再寻找nil?差异的明确定义nil? , blank? , empty? 在Ruby on Rails中. 这是我最接近的: blank? 对象是false,空或空白字符串. 例如, &q ...
最新文章
- SpringBoot第十四篇:在springboot中用redis实现消息队列
- 自学python需要多长时间-零基础自学python要多久?
- MySQL学习笔记 约束以及修改数据表
- [USACO1.5]数字三角形 Number Triangles
- 强烈推荐,关于5G最深刻的一篇文!
- SQL Server2005探索之---正确使用索引
- 2021江西高考成绩小分查询,2021江西高考成绩查分时间
- windows 2003 远程桌面无法使用剪贴板共享纯文本的解决方法(亲测可用)
- 开发了个 Flipper 调试工具的 Flutter 版本 SDK,让 Flutter 应用调试起来更容易 1
- 更改Servlet需要重启Tomcat
- 自动驾驶汽车技术介绍【硬件+软件】
- 软件工程第二次自考总结(2020年8月)
- [EE261学习笔记] 4.常用的几个傅里叶变换相关公式
- IP是如何代理的_怎么设置IP代理
- bzoj 4372 烁烁的游戏——动态点分治+树状数组
- JavaScript之移动端网页特效与本地存储(57th)
- java基于springboot+Vue+nodejs的高校运动会报名管理系统 element
- python爬取中国天气网中国全部城市的天气链接
- 事务Read Committed (读已提交)和Repeatable Read(可重复读)到底什么区别?
- OpenLayers实现小车的轨迹查询的功能