淘淘商城第106讲——改造商品详情页面中的加入购物车板块

在上一讲中，我就说过，关于购物车模块，之前的京东和淘宝并不一样，之前的京东允许用户在没有登录的情况下就添加商品进购物车，而且加到购物车里面的商品可以一直保存着。其实这是将购物车信息写入到了Cookie中，如果清空了Cookie，那么也就清空了购物车。把购物车信息写入到了Cookie中也有其优缺点，如下：

我们可以访问一下淘淘商城首页（前提是启动了所有的服务器及工程，虽然有个别工程用不上，不过也没关系啦），并在搜索框中输入要搜索的商品（我以前添加过苹果这款手机，现在我就来搜索它）。

搜索到的结果页面如下图所示。

我们再点击这款手机，查看其详情，如下图所示。

如果这时我们点击上图中的加入购物车按钮，如下图所示，那么可以看到请求的地址并不正确，而且请求中没有携带商品数量的信息，因此我们需要对原有商品详情页面购物车这一块进行改造。

首先，我们找到taotao-item-web工程下的item.jsp页面，并搜索"购物车"，这时便可以搜索到如下图所示的内容。

为了在请求url中带上商品数量的参数，我们定义一个函数，例如addItemCart，如下图所示。

addItemCart函数的代码如下所示：

function addItemCart() {
	// 取商品数量
	var num = $("#buy-num").val();
	// 页面跳转
	location.href = "http://localhost:8089/cart/add/${item.id}.html?num=" + num;
}

其中商品数量是通过id选择器来获取的，关于显示商品数量的那行代码在下图所示的位置处。

写好了addItemCart函数之后，我们回到加入购物车那块的地方，将原来href里面的内容改为href="javascript:addItemCart()"，如下图所示。

修改完之后，我们来刷新商品详情页面，然后点击加入购物车按钮，这时我们可以看到跳转后的浏览器地址栏中的地址是http://localhost:8089/cart/add/160491955602173.html?num=1，链接地址已经指向我们的购物车工程了，而且带上了商品数量参数，不过此时由于还没有实现购物车，因此页面才会显示"无法访问此网站"，如下图所示。

我们再回到商品详情页面中，将商品数量添加到3，然后点击加入购物车按钮，如下图所示。

这时跳转后浏览器地址栏中的地址是http://localhost:8089/cart/add/160491955602173.html?num=3，可以看到只是请求后面的num参数的值变成了3，这说明我们已经改造好了。