Agile Web Development with Rails 3nd Edition學習筆記-創建一個基於Ajax的購物車

上篇筆記中,我們通過partial把購物車信息放到了index頁面的Sidebar上。當我們點擊“Add to Cart”按鈕時,Sidebar上的商品和數目會改變。但是,我們同時會發現,刷新了的不僅僅是購物車信息,整個頁面都刷新了。如果你的瀏覽器中顯示的本來就是頁面的最頂端,就不會有什麼感覺。但是如果你選擇的產品是在你瀏覽到了頁面的中間或者更下面,當你點擊了“Add to Cart”之後,頁面又會回到最頂端。以至於你必須再去尋找你剛纔看到了哪裏。這樣往復的動作,直到你感到很崩潰。
那麼,我們這節來改善一下用戶體驗。讓用戶點擊了“Add to Cart”之後,只是刷新購物車信息部分的內容,而不會刷新整個頁面。
要做到這件事,就需要使用一些Ajax的技術了。幸運的是,Rails提供了很強的功能來幫助我們生成頁面的JavaScript代碼,節省了我們的時間,同時也讓我們能夠把更多的精力放在功能的開發上,而不是代碼細節。
首先,我們要在layout中添加一些代碼來引入一些必要的JavaScript定義。在depot/app/views/layouts/store.html.erb文件中導入CSS樣式表的後面,添加下面的代碼:
<%= javascript_include_tag :defaults %>

通過查看實際生成的頁面代碼,我們可以看到這行代碼實際爲頁面添加了如下5個JavaScript庫文件:
<script src="/javascripts/prototype.js?1272207119" type="text/javascript"></script> 
<script src="/javascripts/effects.js?1272207119" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1272207119" type="text/javascript"></script>
<script src="/javascripts/controls.js?1272207119" type="text/javascript"></script>
<script src="/javascripts/application.js?1271501647" type="text/javascript"></script>

接下來,我們要修改“Add to Cart”按鈕的實現,把原先的POST請求變成一個Ajax的請求。我們要做的就是使用下面的代碼來替換depot/app/views/store/index.html.erb文件中原先的button_to代碼。
<% form_remote_tag :url => { :action => 'add_to_cart', :id => product } do %>
<%= submit_tag "Add to Cart" %>
<% end %>

通過查看實際生成的頁面代碼,我們可以看到,原先的一個submit動作變成了如下的Ajax請求:
new Ajax.Request('/store/add_to_cart/2', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;

然後,我們要修改一下add_to_cart方法來響應我們的Ajax請求。我們要做的就是把上節在這個方法中添加的redirect_to_index的調用使用下面的代碼替換掉。
respond_to do |format|
format.js
end

這樣修改之後,當add_to_cart方法處理完Ajax的請求後,Rails將會尋找該方法的template來送給頁面。之前我們使用的是add_to_cart.html.erb作爲該方法的template的。其實Rails還支持以“.js.rjs”結尾的template。這種template中實際是定義要在瀏覽器端使用的JavaScript代碼的。
那麼,我們現在就定義一個新的add_to_cart.js.rjs文件來作爲這個方法的template。
page.replace_html("cart" , :partial => "cart" , :object => @cart)

這段代碼的作用實際上是新的數據結果替換掉index頁面中id爲“cart”的div部分。也就是我們顯示購物車信息的地方。最終,瀏覽器端頁面上關於購物車信息的代碼將被新的所替代,這樣實際上就刷新了那個小區域。

好了,我們可以在瀏覽器上欣賞一下Ajax給我們帶來的良好體驗了。

如果按照上面的步驟,你的頁面沒有表現出Ajax給我們帶來的良好體驗。下面是書中給的一些提示,也許有助於解決你的問題:
1、你是否刪除了原來的add_to_cart.html.erb文件?(應該刪除)
2、第一步中提到的javascript_include_tag你是否添加了?(它會爲你添加Ajax需要的JavaScript庫)
3、你的瀏覽器有沒有什麼特殊的設置之類的東西強制刷新頁面上的所有東西?有是瀏覽器在本地保存的頁面緩衝也會有影響。這時候最好強制刷現一下你的頁面。
4、有沒有什麼錯誤信息被添加到了development.log文件中?
5、有沒有在development.log中看到你的程序接收到了來自瀏覽器的add_to_cart請求?如果沒有,那意味着頁面沒有生成Ajax請求。如果JavaScript的庫確實被加載了,那麼,可能你的瀏覽器禁用了JavaScript。
6、有人報告說他們必須停掉他們的服務,重新啓動服務才能使得我們的修改生效。如果前面的方法沒有解決你的問題,也許你也需要重新啓動一下服務。
7、如果你使用的瀏覽器是IE,也許它正運行在"quirks"模式,請把它重新設置到“Standard”模式。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章