8. 尚硅谷_佟刚_Ajax_典型应用_添加商品

我们看第二个地方，第二个地方的话呢，加入购物车的时候，大家看这是不是一个AX操作呀，啊告诉说诶将什么什么加入到购物车里面几本书，这时候变的都有什么东西啊，变的大家看诶。书名跟数量吧，这两个地儿吧，好这是一个地方，我们再看查看购物车，查看购物车的话呢，我我可以加吧。这个时候怎么样，这个本数和这个总价格都发生变化吧，是这个意思吧，哎，类似于这样的几个地方发生变化。那我们直接做一个综合的，然后的话呢，你从里边给它这个嗯，摘出来就可以了，我们也写一个类似的操作，来，我们写个APP two。

这个APP two和这个APP不一样在哪呢？这个APP two啊，我们直接怎么样，我们直接我们需要写上一个这个书的一个列表啊，产品的一个列表，我们来写一下啊看写一个index.jsp。导入JSTL，因为我需要做循环。想想哈，写死了也可以，我们不论循环，我们给它写死了，写死完之后的话呢，我们这么写几本书啊，A drive这是什么，无所谓了哈，就加入购物车，加入购物车好了，这块的话呢，我写的书，比方说Java b b好了过来。

啊，我就下面不就可以了哈，Java，然后我们这块我们再写一个or口，我再写一个抓two，好，我可以把这三本书呢加入购物车，当我点这个加入购物车的时候啊，我们希望在这个上边我要显示一些信息，我们看看这个信息哈，希望显示这样的一个信息，叫您将将什么什么加入到购物车中，然后呢，再来再来一个购物车中的。书有多少本？总价格多少钱？这就可以了吧，这个时候我要改的话，我需要改几个地儿啊，123是这个意思吧，哎，我需要改这好几个地方。

跟前边会多少有点不一样，好了，那我们写吧，ADD to cut，写个问号吧，God，等于Java。Ctrl c Oracle。抓two我为了省事呢，我直接来写个价格，Price等于比方说100。就是说我要是不这样写的话得怎么办呢？是不是得来源于数据库啊，那我这块的话呢，我直接写死了，道理一样，我们开发到时候这块是不是传了一个ID啊，你是不是可以利用这个ID上数据库里边去查你的价格是多少钱啊，道理一样吧，好媳妇这个写完之后的话呢，还不够。

我们还差个什么呀，你看什么什么书，我这块书名我可以获取了吧，书名我们是用ID来写的哈，呃，总价格多少钱多少钱啊，这个有了，这是单本的价格吧，我需要一个总价格，所以说我们这块我们直接来写一个B吧。来。死，哎，就是我们前面说那个shopping car对象。购物车里边你有什么东西啊？Shopping点行了。好了，有了这个的话呢，这里边我们需要有一些基本的属性，比方说啊，一共多少本书，Private total book number，好了，还有一个总的价格，In，总的价格是算的是吧，还有一个什么呀，还有一个这个一共有多少本书，我们。

购物车那个是不是还有一个shopping卡item，这里边放的是map吧，写吧，In。Shopping it等于new哈西map。秦晓宇。

CTRLC我们写一个哈。六哈希map。这有啥问题啊？给这个是吧，给他吧。嗯，好写完，然后的话呢，这里边我们需要去写写几个方法，比方说第一个public，呃，种的书的数量来int，这不需要写了，来看吧。

那还挺麻烦的，这里边你得写什么呀，你写数量吧，Private inch。Number数量，同时你还得有那个书吧，是吧，那我们这块为了省事的话呢，我不写书了，我直接就写这个书的名字，再写一个书的价格可以吧，这个意思大家懂吧，OK，盖的方法。写好就是说我这个shopping car item呢，里边实际上应该是book，然后这两个封装成一个对象吧，是吧，但我现在的话呢，我图省事，我就这么写了，然后这里边的话呢，我有一个map，这个键是shopping cup那个ID，那ID也省吧，不要了，我们。

这个有啥用呢？我选成一个string形吧，直接用书的名字来作为这个键，好来存放，存放什么呢？存放这个shopping cut item的map，既然是map的话，就得谈到键值，对，都有什么，键是什么，直是什么，见是书名。直是上面看艾他们对象好了，写完写完之后的话呢，我们这个里边我们有几个这个方法需要我们用的哈，大家看啊，我这边我只有一个就加入购物车，我点一次加一个，点一次加一个就完了，好了，我要是加入购物车的话呢，写个方法吧，来public。

VO ADD to cart，我这car的话呢，我得写什么东西啊。我这个爱卡的话呢，我只有一个string book，那别的没有，当然了同学说老师你你有啊，你这块你不是还有一个价格吗。这块的确是还有一个价格，那我这个价格的话呢，写上一个吧，Price OK，我往这里边加，我怎么加呢，我说如果。it.contains key，如果要是包含的话，我怎么了？我是不是先获取出来啊，Shopping item。

这么恶心的，这个没删呢。有一个是shopping cart，我得给他改了，哎呀，这这太恶，这应该叫cart。看一眼哈，对，这应该叫cart shopping cart。而这个叫刷屏卡艾特。程序。然后呢，这个叫shopping cart item，刚才写的问题啊。好了，那我要是包含这个书的话呢，我就把这个给取出来，Shopping cart item item等于啥呀？item.get。

取出来，取数量加一吧，使数量加1SET。Number，那我get number加一是这写吧，如果要不包含的话，我创建一个新的范吧，不包含我创建一个新的shopping car item等于new shopping car item item.set book name传进来的来item.set。Price传进来的，再来一个item.set number是一吧，然后把这个放里边去。it.put键name值item是这样一个方法吧，OK，写完还有。这是ADD to cart，然后的话呢，我还需要写几个方法，比方说呃，种的数量in get total book number咋写？

Get total number哦，直接return还不行，In total等于零，然后呢，Return to口是这么写吧，来。做一个循环呗。Shopping car item item item.values然后是total加等item.get number是吧？呃，数量还有一个总的价格public in get talk money吧，懂得钱数吗？内等于零，Return money这个方法跟这个方法是相类似的。

CTRLCCTRL怎么写啊，乘以item点吧。总的价格，总的钱数别的没有了，好像是点它，你看总钱数有了多少，五数有了加什么什么的话呢，我这块是不是可以获取啊。行了，这个就构建完了，好了，那前期准备工作呢，写完了，那后边我们来看我们需要呃有哪些挑战，首先呢，我们来确定一下，呃，我们整个Ajax请求以及处理的整个的一个思路和步骤。我们来写注释。我们需要分哪些步骤啊？第一个我需要获取当前页面的所有的A节点看。

当前页面呢，只有这三个A节点，所以说或许没问题。并未。每一个A节点都添加on click。响应。函数同时取消其默认行为，同时取消其默认行为啊，这是我们要做的第一件事。第二件事，我们准备发送Ajax请求，准备发送Ajax请求，准备什么呀？准备一个URL，这个URL呢。就是请求的目标地址，实际上就是A节点的和属性值。

好，第二个呢，我们还要准备这个参数，这个参数是什么呀？实际上只有一个时间戳，没有别的了，好了，然后AX请求发过去，然后我们准备解析响应。我们然后把那个响应怎么样放到啊这块，这个时候我们需要确定，呃，发回那个响应的这个格式是个什么格式，它包含哪些数据。我们这块实际上是一个设计的这个过程哈，然后说。响应。为一个什么呀，大家看简要里边的话呢，我需要包含什么什么书啊，一共多少本，还有多少多少钱，很明显是一个对象比较合适，那是应该是个什么对象，一个杰森对象。

怎样是一个介对象，包括？这样的一些属性，比方说book name，说明总共多少本书，Out number。这个钙的方法所对应那个属性？还有什么？还有一个是呃，总共多少钱，那我这块应该是total money。这样就可以，我们希望返回这样的一个结果。四把对应的处境。添加到对应的位置，那我现在这个位置怎么样都定位不了啊，我需要给他定位一下。问一下，首先我加个空格。

使用什么定位啊，我们使用使用一个定位就可以了。AD。什么什么书，Book name？Proceed。你认为总共多少本outbook number？还有一个总价格多少多少钱。这个复制一下。总价格多少多少钱。C这OK，这样的话呢，我这个就写完了。那下面的话呢。我们来来具体直线每一个步骤，刚才我们这个步骤分析就OK了哈，直线某直线每一个步骤，那我首先我需要导入GX。

Contact again。Respect their contact us。下边的此刻。Lips架编的那个。来，然后呢。来一个script。Function OK，我们写我们的基本步骤，我所有的一节点一起来吧，好吧。A点。

Function。Can fo就是我们的第一个步骤，第二个步骤ul等于x.for X等于又是一个时间波。搞定。然后发请求。X。Function。要把对应的属性放到对应的位置，那我们叠加方式就是大写。怎么样？GG。啊。本本值。是hit him。下一个outbook number。这个值是推的number。

How money？是的，Bottle money写完下一个步骤的话呢，我们就要去写我们的。服务端。服务端呢，我要创建一个叫ADD to cut。请创建一个。好，我都盖pose都要了哈。我要不要的话呢，我希望他俩的应答的这个请求是一致的，于是我在do盖子里边调一下do。这个里边正常写。

这步骤应该是什么呀？获取请求参数，请求参数应该是包括。Book name跟price这样的两个请求参数。用APP请求带的哦，应该是ID哈，ID跟price。这个ID实际上就是。二怎么样获取购物车对象？购物车应该在哪呀？应该在section里面。三二。点滴的选项。加入到购物车中。第四。准备响应的接森对象。五响应接森对象就可以了，这样的几步，拜拜。

ID等于。Request。对吧。然后是。Price等于点。In request.get pro price合并获取购物车对象，我们在前面学习的时候呢，我们知道我第一次点加入购物车的时候啊，没有购物车，我需要上30里面去获取，如果30里面没有的话呢，我需要创建一个新的放到赛质里面来，所以说这样写啊，Open cut。Shopping cart等于。

GDP。Session。等于request.session OK section.ga attribute。SXC。如果C要是等于。空的话，我就创建一个新的购物车对象。然后把这个新的放到。三人里边去。搞定。加入购物车。STEM。准备接森的字符串，有字串长啥样大家说。长成这个样子啊，看着。不，Name。后边是定那个book name。

逗号。还有什么来着？就是我们这块写的这些是吧，来。看一眼啊。Co book number。后尾的话呢，应该是一个值，比方说多少多少100。笑一个。Auto money。好了，后尾的话呢，还有一个值啊，大致上是这样的一个结果，这个字符串的话呢，需要我们拼，我们手工来拼写。等于new。吕尚田。啊。Result。点先放个啥呀。先放一个括号。

然后一定马上再放一个括号，它的错误是是吧。然后开始写。然后是把and放什么呢？放book name。注意这是一个字符串，我这个字符串啊，需要拿引号给它引起来啊，我们在前面测试的时候的话呢，我们用的是单引号，我们这块我们也用单引号，单引号怎么了都不用转义了呀。冒号就写。还需要再写一个，这个值是谁呢？这个值就是我们前面写的那个。Book。STEM。好了，这个book name也需要拿单引号引起来这样写。对吧，然后点什么看看是不是这个逗号啊。

括号，OK，继续。做什么呢，你看。这个需要拿单引号引起来。括号。加1.getnumber。带and带逗号，带和and这个值呢，是cost money。这个需要拿单引号引起来，杰森的这个格式啊，就是比较烦躁。加C。对吧。好，写完以后。响应response点。Fat。Car。看顶扣顶什么呀。Content，我们返回的是一个DS格式。格式这么写，X Java script。

把这个结果一返回，就可以write点问题。点two OK。写完看一下效果。找一个。走哪去？就这个。不。这里边儿的话有一些问题哈，我这块我需要加一个空格，我们看。这块我需要加一个空格上去。而且呢，这个书跟加入后车之间，呃，再来放一个空格，这个是这个换行哈，换行OK，点一个NBD。

嗯。P。Lucy。担心。这里面还有一个问题，就是。这行字啊。在购物车。为空的时候就购物车里边啥也没有的时候，是不是就不要显示了？这个怎么做，这我们一会儿再说，我们先看这个功能，我选一下，哎哟。结果没有好用。复制我们用这个Chrome。可是我里边有一个开发者工具，我们能够看到这个请求是不是过去了。打开。工具开发者工具。网络没问题，点一个。404。

没有找到这个。ADD to cart。Ajax APP two下边的哦。这应该是一个路径的问题是吧，Ajax two下边的，而我们这里边写的时候，我们怎么写的。我直接直接写了一个ADD to cut。那我把这个。给他搞一下吧，这个里边我们需要写上是绝对路径，绝对路径。CTRLC。否则是相对于当前页面那个路径APP two下边的没有。好。这种。对抗。上面没有反应，但是这个请求OK了，而且这个结果呢。也回来了。这结果我们看一下啊，Book name Oracle。

Total book number1total money200，诶这个是没问题的，但是他为什么没有，为什么没有给我们显示呢。就是特别诡异，也是特别让人不能接受的一个问题。我们把这个字符串拿过来测试一下，看看它是不是一个阶层对象。我就在这个里边测，在这个里边测试一下吧。未接等于OK多我们写一个看一下啊OB接点。Name，好，当前页面刷新一下。没问题。的确是一个阶层对象，但是如果这个阶层对象要是从服务器端返回的话，他要求。这个引号必须是双引号，单引号不行，不讲理。那没办法，你不这样做的话就不行。

我再说一遍这个问题哈，如果我们是从服务端返回一个阶层字符串的话，我们要求这个引号必须是双引号，单引号不行，所以说这个里边怎么改呢？把这个单引号本称F改成短E下边的双引号。All。保存那种。发现。OK，大家看就有好用了。你看每一次这个值都是变化的，而且这个钱数也是跟着变化的。呃，Java是100块钱，对这200块钱。Two是100块钱对吗？没问题啊，这样的话呢，我们这个结果基本上就出来了。

好，这里边有一个特别需要注意的，我来写一下哈说。若从服务端返回。E字符串，则。楚姓名必须使用双引号。嗯。就是这样，你们单引号就不行，实际上我们觉得单引号没啥问题，就过不了。好。我们再回来。我这边还有什么问题啊，下一个问题就是这块的一个问题。诶，我在第一次刷新购物车还没有的时候，他给我把给我搞这个是不是不咋好啊。那怎么样把这个问题解决一下呢？

在我们这个应用里边呢，如果我要是有购物车的话。就有书对吧，你看我不是有购物车，我前提是往里边加书的情况下才有吗？那么我们这里边儿呢，并没有清空购物车这个操作，所以说我这块我可以来判断是否存在购物车。如果有购物车的话，我就让它显示，而且把对应这个值添上，如果没有购物车的话，我就让隐藏，这个我们可以通过GS来实现，首先我们需要让这段隐藏或者是显示加上一个div。AD。Park。是A哦，让他隐藏或者是显示。判断一下。那什么呢？判断是否存在后车？

Is。是否存在购物车？War is he。看因为什么呢，就这个写法，我要写上一个。EL操作。三生scope.sc。如果这个值。等于。空的话，OK，我alert一下，我看这值是什么意思，As part保存，首先我来刷一下。来看就是是不是处啊，如果这个值是处的话。如果这个值等于处的话。

对呀，就是没有购物车，那我就让他。Income。Your head。否则呢，我就需要让他。建制。电视。而且我还需要把这个值一个一个的高减上。明显我们不是有这个shopping cart吗？这样引起来。那就可以是吧，报名看里边有一个name。招聘card里边貌似没有，Book内就要加一个是吧，有。

有什么呀？我叫亮来。Control。C。有这个叫。Photo。Book number，这个是有的。这样写。下边一个叫talk to money。Bottle。Money差一个什么呀，差一个内，我于是呢，里边我加这样的一个属性。Private。Book name我加的时候呢，我就让get.name。等于。Book name OK，解一个对应的get方法。

保存。重新启动武器。看一下效果。刷新。没有显示对吧，我把这个alert呢先去掉。保存。OK。坏了，我点加入购物车的话呢，他也没有显示，这个不行啊，我点加入购物车的时候，我才一上来就需要让它显示。哎，这就需要让它显示。就是看一下。这个时候的话呢，已经有了加入购物车，加入购物车我。复制重新来。点开。注意看没有。加入购物车，加入购物车，OK？

复制我打开一个新的页面，大家看，哎，这个时候的话呢，它也可以显示。二是购物车。于是的话呢，这个问题我们就给他。解决掉了，那解决的基本思路就是我们要判断这个购物车是不是。存在，如果购物车要是不存在的话，让他隐藏，如果存在的话呢，让它显示，而且把购物车里边这些属性值都附到相应的位置就可以了。那这就说明的是我们第一次点击的时候，哎，我们希望它是显示的状态。好了，那这样的话呢，我们这个基本的操作呢，就写完了。但是我们也要说一下哈。这里边我们看到什么呀，我们看到我们拼这个串是不是很痛苦啊，我们有没有一种好的方式不用来拼这个串呢？而能调一个方法，它就可以帮我生成对应的字符串呢？

嗯，答案是可以的，我们下节课说。