文档介绍：迭代D2:创建基于Ajax的购物车
Iteration D2:Creating an Ajax-Based Cart
Ajax允许我们通过编写在浏览器中运行的代码,来与服务器端的应用程序交互。在这里,我们希望让Add to Cart按钮在后台调用服务器端的add_to_card方法,随后服务器把关于购物车的HTML发回浏览器,我们只要把服务器更新的HTML片段替换到边框里就行了。
要实现这种效果,通常的做法是首先编写在浏览器中运行的JavaScript代码,然后编写服务器端代码与JavaScript交互(可能是通过JSON之类的技术)。好消息是,只要使用Rails,这些东西都将被隐藏起来:我们使用Ruby(再借助一些Rails辅助方法)就可以完成所有功能。
向应用程序中引入Ajax的技巧在于“小步前进”,所以我们先从最基本的开始:修改货品列表页,让它向服务器端应用程序发起Ajax请求;应用程序则应答一段HTML代码,其中展示了最新的购物车。
在索引页上,目前我们是用button_to()来创建“Add to Cart”链接的。揭开神秘的面纱,button_to()其实就生成了HTML的<form>标记。下列辅助方法
<%= button_to "Add to Cart" , :action => :add_to_cart, :id => product %>
会生成类似这样的HTML代码
<form method="post" action="/store/add_to_cart/1" class="button-to">
<input type="submit" value="Add to Cart" />
</form>
这是一个标准的HTML表单,所以,当用户点击提交按钮时,就会生成一个POST请求。我们不希望这样,而是希望它发送一个Ajax请求。为此,必须更直接地编写表单代码——可以使用form_remote_tag这个Rails辅助方法。“form_..._tag”这样的名字代表它会生成HTML表单,“remote”则说明它会发起Ajax远程调用。现在,打开app/views/,将button_to()调用替换为下列代码:
depot_l/app/views/store/
<% form_remote_tag :url => { :action => 'add_to_cart', :id => product } do %>
<%= submit_tag "Add to Cart" %>
<% end %>
用:url参数,你就可以告诉form_remote_tag()应该如何调用服务器端的应用程序。该参数接收一个hash,其中的值就跟传递给button_to()方法的参数一样。在表单内部(也就是do和end之间的代码块中),我们编写了一个简单的提交按钮。在用户看来,这个页面就跟以前一模一样。
虽然现在处理的是视图,但我们还需要对应用程序做些调整,让它把Rails需要用到的JavaScript库发送到用户的浏览器上。在第24章“Web ”(第521页)中,我们还会详细讨论这个话题;现在,我们只需在store布局的<head>部分里调用javascript_include_tag方法即可。
depot_l/app/views/layouts/
<html>
<head>
<title>Pragprog Books Online Store</title>
<%= stylesheet_link_tag "depot" , :media => "all" %>
→<%= javascript_include_tag :defaults %>
</head>
到目前为止,浏览器已经能够向我们的应用程序发送Ajax请求,下一步就是让应用程序做出应答。我们打算创建一段HTML代码来代表购物车,然后让浏览器把这段HTM插入当前页面的DOM
文档对象模型(Document Object Model)。这是文档结构和内容在浏览器中的内部表示,我们据此来改变显示给用户的东西。
,替换掉当前显示的购物车。为此,我们要做的第一个修改就是不再让add_to_cart重定向到首页。(我们知道,我们刚刚才加上这个功能,现在又要把它拿掉了……我们很敏捷,对吧?) 我们调用respond_to(),其实就是一个使用代码块作为参数的方法调用。“代码块与迭代器”中有介绍。“分别