資源描述：
《rails敏捷開(kāi)發(fā)《2》》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。
1、9.2迭代D2：創(chuàng)建基于Ajax的購(gòu)物車IterationD2：CreatinganAjax-BasedCartAjax允許我們通過(guò)編寫(xiě)在瀏覽器中運(yùn)行的代碼，來(lái)與服務(wù)器端的應(yīng)用程序交互。在這里，我們希望讓AddtoCart按鈕在后臺(tái)調(diào)用服務(wù)器端的add_to_card方法，隨后服務(wù)器把關(guān)于購(gòu)物車的HTML發(fā)回瀏覽器，我們只要把服務(wù)器更新的HTML片段替換到邊框里就行了。要實(shí)現(xiàn)這種效果，通常的做法是首先編寫(xiě)在瀏覽器中運(yùn)行的JavaScript代碼，然后編寫(xiě)服務(wù)器端代碼與JavaScript交互(可能是通過(guò)JSON之類的技術(shù))。好消息是，只要使用Ra
2、ils，這些東西都將被隱藏起來(lái)：我們使用Ruby(再借助一些Rails輔助方法)就可以完成所有功能。向應(yīng)用程序中引入Ajax的技巧在于“小步前進(jìn)”，所以我們先從最基本的開(kāi)始：修改貨品列表頁(yè)，讓它向服務(wù)器端應(yīng)用程序發(fā)起Ajax請(qǐng)求；應(yīng)用程序則應(yīng)答一段HTML代碼，其中展示了最新的購(gòu)物車。在索引頁(yè)上，目前我們是用button_to()來(lái)創(chuàng)建“AddtoCart”鏈接的。揭開(kāi)神秘的面紗，button_to()其實(shí)就生成了HTML的
這是一個(gè)標(biāo)準(zhǔn)的HTML表單，所以，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，就會(huì)生成一個(gè)POST請(qǐng)求。我們不希望這樣，而是希望它發(fā)送一個(gè)Ajax請(qǐng)求。為此，必須更直接地編寫(xiě)表單代碼——可以使用form_remote_tag這個(gè)Rails輔助方法。“form_..._tag”這樣的名字代表它會(huì)生成H
4、TML表單，“remote”則說(shuō)明它會(huì)發(fā)起Ajax遠(yuǎn)程調(diào)用?，F(xiàn)在，打開(kāi)app/views/store目錄下的index.html.erb文件，將button_to()調(diào)用替換為下列代碼：depot_l/app/views/store/index.html.erb<%form_remote_tag:url=>{:action=>'add_to_cart',:id=>product}do%><%=submit_tag"AddtoCart"%><%end%>用:url參數(shù)，你就可以告訴form_remote_tag()應(yīng)該如何調(diào)用服務(wù)器端的應(yīng)用程序。該
5、參數(shù)接收一個(gè)hash，其中的值就跟傳遞給button_to()方法的參數(shù)一樣。在表單內(nèi)部(也就是do和end之間的代碼塊中)，我們編寫(xiě)了一個(gè)簡(jiǎn)單的提交按鈕。在用戶看來(lái)，這個(gè)頁(yè)面就跟以前一模一樣。雖然現(xiàn)在處理的是視圖，但我們還需要對(duì)應(yīng)用程序做些調(diào)整，讓它把Rails需要用到的JavaScript庫(kù)發(fā)送到用戶的瀏覽器上。在第24章“Web2.0”(第521頁(yè))中，我們還會(huì)詳細(xì)討論這個(gè)話題；現(xiàn)在，我們只需在store布局的
部分里調(diào)用javascript_include_tag方法即可。depot_l/app/views/layouts/st
6、ore.html.erb
PragprogBooksOnlineStore<%=stylesheet_link_tag"depot",:media=>"all"%>→<%=javascript_include_tag:defaults%>到目前為止，瀏覽器已經(jīng)能夠向我們的應(yīng)用程序發(fā)送Ajax請(qǐng)求，下一步就是讓?xiě)?yīng)用程序做出應(yīng)答。我們打算創(chuàng)建一段HTML代碼來(lái)代表購(gòu)物車，然后讓瀏覽器把這段HTM插入當(dāng)前頁(yè)面的DOM文檔對(duì)象模型（DocumentObjectModel)。這是文檔結(jié)構(gòu)和內(nèi)
7、容在瀏覽器中的內(nèi)部表示，我們據(jù)此來(lái)改變顯示給用戶的東西。，替換掉當(dāng)前顯示的購(gòu)物車。為此，我們要做的第一個(gè)修改就是不再讓add_to_cart重定向到首頁(yè)。(我們知道，我們剛剛才加上這個(gè)功能，現(xiàn)在又要把它拿掉了……我們很敏捷，對(duì)吧？)我們調(diào)用respond_to()方法并告訴它我們要響應(yīng)的是.js格式文件這條語(yǔ)句乍看起來(lái)有些奇怪，其實(shí)就是一個(gè)使用代碼塊作為參數(shù)的方法調(diào)用。代碼塊在第A.9節(jié)“代碼塊與迭代器”中有介紹。在第12.1節(jié)“分別應(yīng)答”中有更詳細(xì)的描述。。Downloaddepot_l/app/controllers/store_contro
8、ller.rbdefadd_to_cartproduct=Product.find(params[:id])@cart=find_car
