rails敏捷开发《2》

《rails敏捷开发《2》》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、专业技术资料整理分享9.2迭代D2：创建基于Ajax的购物车IterationD2：CreatinganAjax-BasedCartAjax允许我们通过编写在浏览器中运行的代码，来与服务器端的应用程序交互。在这里，我们希望让AddtoCart按钮在后台调用服务器端的add_to_card方法，随后服务器把关于购物车的HTML发回浏览器，我们只要把服务器更新的HTML片段替换到边框里就行了。要实现这种效果，通常的做法是首先编写在浏览器中运行的JavaScript代码，然后编写服务器端代码与JavaScript交互(可能是通过JSON之类的

2、技术)。好消息是，只要使用Rails，这些东西都将被隐藏起来：我们使用Ruby(再借助一些Rails辅助方法)就可以完成所有功能。向应用程序中引入Ajax的技巧在于“小步前进”，所以我们先从最基本的开始：修改货品列表页，让它向服务器端应用程序发起Ajax请求；应用程序则应答一段HTML代码，其中展示了最新的购物车。在索引页上，目前我们是用button_to()来创建“AddtoCart”链接的。揭开神秘的面纱，button_to()其实就生成了HTML的

4、form_..._tag”这样的名字代表它会生成HTML表单，“remote”则说明它会发起Ajax远程调用。现在，打开app/views/store目录下的index.html.erb文件，将button_to()调用替换为下列代码：depot_l/app/views/store/index.html.erb<%form_remote_tag:url=>{:action=>'add_to_cart',:id=>product}do%><%=submit_tag"AddtoCart"%><%end%>用:url参数，你就可以告诉form

5、_remote_tag()应该如何调用服务器端的应用程序。该参数接收一个hash，其中的值就跟传递给button_to()方法的参数一样。在表单内部(也就是do和end之间的代码块中)，我们编写了一个简单的提交按钮。在用户看来，这个页面就跟以前一模一样。虽然现在处理的是视图，但我们还需要对应用程序做些调整，让它把Rails需要用到的JavaScript库发送到用户的浏览器上。在第24章“Web2.0”(第521页)中，我们还会详细讨论这个话题；现在，我们只需在store布局的部分里调用javascript_include_t

6、ag方法即可。depot_l/app/views/layouts/store.html.erb<%=stylesheet_link_tag"depot",:media=>"all"%>→<%=javascript_include_tag:defaults%>WORD文档下载可编辑专业技术资料整理分享到目前为止，浏览器已经能够向我们的应用程序发送Ajax请求，下一步就是让应用程序做出应答。我们打算创建一段HTML代码来代表购

7、物车，然后让浏览器把这段HTM插入当前页面的DOM文档对象模型（DocumentObjectModel)。这是文档结构和内容在浏览器中的内部表示，我们据此来改变显示给用户的东西。，替换掉当前显示的购物车。为此，我们要做的第一个修改就是不再让add_to_cart重定向到首页。(我们知道，我们刚刚才加上这个功能，现在又要把它拿掉了……我们很敏捷，对吧？)我们调用respond_to()方法并告诉它我们要响应的是.js格式文件这条语句乍看起来有些奇怪，其实就是一个使用代码块作为参数的方法调用。代码块在第A.9节“代码块与迭代器”中有介绍。在

8、第12.1节“分别应答”中有更详细的描述。。Downloaddepot_l/app/controllers/store_controller.rbdefadd_to_cartproduct=Product.