rails敏捷开发2-

rails敏捷开发2-

ID:31344749

大小:4.23 MB

页数:84页

时间:2019-01-08

rails敏捷开发2-_第1页
rails敏捷开发2-_第2页
rails敏捷开发2-_第3页
rails敏捷开发2-_第4页
rails敏捷开发2-_第5页
资源描述:

《rails敏捷开发2-》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

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

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

标记

3、。下列辅助方法<%=button_to"AddtoCart",:action=>:add_to_cart,:id=>product%>会生成类似这样的HTML代码这是一个标准的HTML表单,所以,当用户点击提交按钮时,就会生成一个POST请求。我们不希望这样,而是希望它发送一个A

4、jax请求。为此,必须更直接地编写表单代码——可以使用form_remote_tag这个Rails辅助方法。“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_t

5、o_cart',:id=>product}do%><%=submit_tag"AddtoCart"%><%end%>用:url参数,你就可以告诉form_remote_tag()应该如何调用服务器端的应用程序。该参数接收一个hash,其中的值就跟传递给button_to()方法的参数一样。在表单内部(也就是do和end之间的代码块中),我们编写了一个简单的提交按钮。在用户看来,这个页面就跟以前一模一样。虽然现在处理的是视图,但我们还需要对应用程序做些调整,让它把Rails需要用到的JavaScr

6、ipt库发送到用户的浏览器上。在第24章“Web2.0”(第521页)中,我们还会详细讨论这个话题;现在,我们只需在store布局的部分里调用javascript_include_tag方法即可。depot_l/app/views/layouts/store.html.erbPragprogBooksOnlineStore<%=stylesheet_link_tag"depot",:media=>"all"%>→<%=javasc

7、ript_include_tag:defaults%>.资料到目前为止,浏览器已经能够向我们的应用程序发送Ajax请求,下一步就是让应用程序做出应答。我们打算创建一段HTML代码来代表购物车,然后让浏览器把这段HTM插入当前页面的DOM文档对象模型(DocumentObjectModel)。这是文档结构和内容在浏览器中的内部表示,我们据此来改变显示给用户的东西。,替换掉当前显示的购物车。为此,我们要做的第一个修改就是不再让add_to_cart重定向到首页。(我们知道,我们刚刚才加

8、上这个功能,现在又要把它拿掉了……我们很敏捷,对吧?)我们调用respond_to()方法并告诉它我们要响应的是.js格式文件这条语句乍看起来有些奇怪,其实就是一个使用代码块作为参数的方法调用。代码块在第A.9节“代码块与迭代器”中有介绍。在第12.1节“分别应答”中有更详细的描述。。Downloaddepot_l/app/controllers/store_controller.rbdefadd_to_cartproduct=Product.find(params[:id])@cart=fin

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。