欢迎来到天天文库
浏览记录
ID:31344749
大小:4.23 MB
页数:84页
时间:2019-01-08
《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代码
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布局的
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
此文档下载收益归作者所有