16-JSON和Ajax请求&i18n国际化/15-尚硅谷-书城项目-使用AJAX请求修改添加商品到购物车的实现

使用阿贾克斯请求啊，把这个商品添加到购物车改一下就原来是什么，大家注意看一下哈，呃。咱们原来首页这个地方。加入购物车，咱们是怎么做的，咱们是点击这个按钮之后，大家看到啊，我们找到那个代码来看一下。是让整个页面都刷新去发起请求的。啊，但是其实在实际的开发过程当中啊，大家注意哈，啊，像像这种加注购物车基本上都是使用阿甲科技请求来做的。啊，只是那个时候咱们还没有讲阿贾克斯啊，咱们就先用这种方法先先实现了，那现在我们换成阿贾克斯，请求我们来看看是什么样的一个操作步骤啊，首先。这里吗？拿过来。是吧，就是它，那么我们点击了以后，你一定是把这个请求发给服务器的啊。

谁呀？就是cut supply的程序。发给他，那么我们说点击加入购物车，发阿杰克请求。就是加入购物车的请求好了，那么这边肯定是有一个方法去处理嘛。Public v、阿贾克斯item添加商品项。好，这里面咱们注意看一下啊。OK，那么我们说这里大概的步骤是什么？第一，怎么样呢？就是获取商品编号，我不知道大家还记不记得，你加入购物车肯定是要告诉服务器，你现在加入的这个购物车的商品编号是多少，人家才知道啊，然后其次，第二，调用book service，点点que bookook by ID。

这个是干嘛呢？就是查询我当前加入购物车的这个商品的信息啊，我得到之后把book对象转化成为t it。转成为cut it。好，有了这个cut I产品以后，咱们说获取session中的购物车对象是吧，Cut嘛，有了这个cut之后第五部。好注意看啊，调用什么东西呢？car.i层方法这时候就添加了商品箱是吧，那商品你也添加完了。

大家注意啊，阿贾克斯请求，只要服务器的业务做完了，这时候我们就要想一想，客户端页面那边需要我们返回什么？其实这很简单，它是有规律的，需要我们返回什么呀，怎么去看呢？很简单嘛，你点完之后，你看页面有哪些改动，那些改动的东西就是你需要你返回的，比如说页面返回总的商品数量，返回最后一个添加的商品名称，那么你是不是应该返回，你返回了以后，它就可以局部更新了呀。记住啊，页面这边需要啥你就给他返回啥就对了，好，那我们说六返回什么东西啊，购物车总的商品数量和最后一个添加的商品名称。就完了嘛。好了，大概就这样的一个过程啊，大概就这样的一个过程，好，那我把这个就复制一下啊，咱们在服务器这边准备下这个方法。

好嗯，购物车里面在哪啊，这里面cut啊，别着急，咱们来加这个方法哪个呀，咱们拿这个an I怎么呢，添加呢，就是它我们其实大家注意看一下哈，咱们要做的这个事情，咱们要做的这个事情其实跟注意看啊，其实跟我们在原来那个版本中做的事情是差不多的，你看见吗？获取商品编号有吧，通过book设计师查询有。然后把这个book转成卡有吧获取购物车对象有吧添加到商品项中有吧，诶一样的，大家记住啊，你说你看这个这个业务其实是一样的，那哪不同，你看啊，以前的那种方式你需要使用。转发重定向返回结果，而阿贾克斯请求呢？你需要把这个数据啊，转成一个Jason，然后以响应流的形式回传给客户端，就就除了这个地方不同，其他都一样，换而言之就是你可以把这个代码。

都复制一下，往这一放。啊，那其实这里面都都是一样的，知道吗？你把这第六步换，把这东西换掉，你看到吗？这就不再需要了，就不需要重对象了。呃，这个从这上跳过去咱也不用了是吧，你就准备一个Jason返回就行了，就这个地方行了啊，当然这个方法名不能一样，叫做阿贾克斯。Ad就这样子完了啊，那这个这个地方怎么返回，咱们看看哈，Map。Object map等于六哈希map。

好，然后在这个里面map，大家注意它需要什么，咱们给他返回什么，首先total。Count总的商品数量嘛，是吧，那好，我给你返回呗，这不就是吗？最后一个推单的商品名称叫做lastname，那我给你返回没问题。嗯，Cut at.get name就好了嘛，那把它打成Jason呢？Go等于六勾in。啊。Gen。叫做，呃，叫做什么？Result map Jason street等于go.to Jason啊，这样就好了，呃，Result map它放进来好了，把这个返回呢，就是response.get right.right呃，这个result map完了吗？大家看见了吗？两种方案其实他们的业务是相同的，除了返回这个地方不一样之外，其他都完全一致。

啊，都完全一致好了，那现在我们要在客户端这边把这种实现方案呢改改啊，咱们不能够再以这种方式来发请求了，那把这个注掉。咱们怎么发？用阿贾克斯请求来发get Jason好，别着急，这里是三个参数，URL date que back是吧？那URL不就是它吗？请地址不就是他吗？来复制一下。就这样子完了以后，这个地方action等于阿贾克斯请求an it层，并且ID等于加上book ID啊，那么回调的方法function date咱们说。

呃，发阿贾克斯请求添加商品到购物车好了，那么这里返回的数据呢？我们可以先输出到控制台，先输出一下。好，咱们启动啊，咱们就看看这个效果。咱们来刷新一下。哎，我觉得用第8UG启动是不是好一点呢，咱们还能调试一下是吧，我先我先把它停了哈，用第bug来吧，然后呢，我们在这里还能打上一个断点给你看一看。好就停了哈，我们看它启动。稍等啊稍等。

好启动了，呃，这个时候啊。我们去一下这里面。好，我点击数据结构与算法啊，我点大家看那ID发过来了，走走这个书查出来是不是数据结构与算法啊，都出来了，没问题，再转成购物车商选项啊，也没问题，这这这简单嘛，是吧，然后获取购物车，第一次获取肯定是空的嘛，空的判断是空的怎么办？就给人家创建一个车，并且保存到session中，添加到呃，这个购物车里面，然后打印一下，打印咱就不看了哈，最后这些地方大家看就把它转成Jason。你看这个值，或者你看下面其实也也方便哈，这个地方大家看最后一个商品名称，整个商品数量是不是都有啊，哎，都有，那放过去大家看一下F12，我们在控制台里面就可以看到这个数据了啊，这里有响应的乱码是吧？你看问号有响应乱码简单呢，咱们解决一下就好了嘛，咱们到base色里面去处理一下。

哎，好在这里面。Response，点点set contain HTML set等于UTF杠八。解决响应的中文乱码解决响应的中文乱码，OK，这就好了。那么好了，以后咱们再来再重新部署，再试一下哈，看这乱码还在不在啊，就差不多了嘛。啊，部署好了，好来吧，咱们再来一下咱们木须肉盖饭对吧，点击。

好，往下走走走走走，稍等哈，走，我们看迪B这边走走走。这个呢就进来了，哎，木须肉盖饭，这也没啥问题，返回的数据。走转大家看是不是也没问题哈，咱们给他放过去，咱们看这边的输出。这时候是不是对了，哎，这个时候数据就对了嘛，那我们只要拿到这些数据在页面上做局部更新就好了。是吧，就完事了嘛，好，我们看看怎么更新哈。我先把这个内容就复制一下，一会儿我懒懒得再复制了哈，就这两个key。哎呀，复制不出来呢，算了，我一会从代码里面复制吧，来大家注意看哈，我在页面这边得到数据以后，我得更新到页面上啊，更新到哪呢？其实就是更新到首页的这个位置，那这个位置是哪的呀？请看往下拉。

往下拉。诶大家看哈，不就是这里和这里的输出吗？对吧，那现在我们要给这个地方加上这个ID。啊叫做叫卡吧。Car total count购物车的总的数量。然后。下面这个地方也加一个ID，叫做cut last，那就最后一个上面名称，那么大家注意啊，除了下面要加以外，上面也得加啊，而且ID还要一样，我复制过来。OK，那么下面这个也也要加。啊，也要加。OK。啊。好了，呃，这个咱们不管它报错哈，没问题的，可以的，来接着咱们在这里写一下，咱们就查找刚刚那两个ID的内容，井号，一个是cut total count点。

CH。内容是多少呢？咱们就看到这里哈。就看这个地方，这个地方要输出的内容是什么，是这一段吗？哎，那你把这段拿过来，中间就是购物车的总的商品数量，来你拼接一下就好了嘛。就往这一放，然后这里呢，是购物车的总的商品数量，好了，date.total count，这就是总的商品数量。然后再来一个。Car last name就最后一个商品名称，我们看看最后一个商品名称是怎么输出的呀，啊，直接输出名字。是吧，那咱们就直接输出就好了。当直接输出就好了，来。

在这个地方直接输出那更简单，date.last name就完事了，就好了，那我们这个写好之后啊，咱们来刷新看一下效果。好，注意看一下我数据结构啊，我的断点还在是吧，咱们不看了哈，我的断点取消了，放过去，大家看看这个是不是上来了，那我再写一下哈，从入门到精通，你看数量还在增加吧，或者说我看到第四页水浒传。西游记是不是都可以啊，你在家走走走是不是也OK啊，啊，也OK。OK啊，这个呢，就是咱们使用阿贾克斯请求把原来这个添加商品的购物车改了，诶好。