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