10. 尚硅谷_佟刚_JavaWEB案例_Ajax修改购物车单品数量.wmv原创

我们来做这个Ajax，修改购物车商品的数量，那首先呢，我们需要把这个数量改为什么呀？改为文本框吗？改为文本框。这里。就是这个呗。In input science。CTRLX再值一行。啊，挺好保存看一下。哎，就这个样好了，下边的话呢，我要改，大家看怎么改呢，把这个改成五，然后拿过来应该加什么试卷啊。

加change吧，好了，我们把这个思路说一下啊，加change事件确定过来，关于Ajax修改数量一定在这块写啊。嗯。Ajax修改。单个商品对吧，数量好了我们说说这个思路哈，第一稿。获取页面中所有的text，那我目前的话呢，这个页面里边这个text是不是仅有这些，就是我说，所以说我说一说可以获取所有，然后并。为其添加on change响应函数。

二好了，Onto加完之后的话呢，我是不是要上要上这个。服务器去发请求啊。是吧，那发请求的话，我请求那个地好写，就是去什么，呃，Book so late什么什么一个方法那个好写，那问题是我要这个请求发过去的话。那我除了那个方法方法名以外，我还需要有什么其他的参数吗？你得告诉我什么呀，你得告诉我我修改的是哪本书吧，把书上改成几吧，所以说应该这么写说。请求地址为啊，我们说函数book so3请求参数为，首先有个比方说叫update。

这是一个还有什么呢？ID吧，我改的是谁吧？叉还有一个qua数量本身啊，这数量本身应该是谁呀？是不是value啊，是不是text value啊，哎，我需要传一个method的，传一个ID，传一个quantity，还需要传什么，为了没有缓存的话呢，我再传一个time new，对这new new这么写啥意思啊？GS里边有个大家看对，就是GS里边的。这解释没问题的，这不是账碍里边的JS里边date好了，请求发过去。4OK，我们看这个请求的话呢，这个method我可以指定吧，指定quantity的话，我是不是可以直接获取这个啊框是不是就是这个本值啊是吧？那。Did值是谁呢？怎么获取呢，看看。

就是他吧，ID址在哪呀。在哪呢ID啊。在哪？大家觉得应该在哪？嗯。我这个引出的是不是有好多属性啊，内型ID吧，Item点。不可点ID，这就可以吧，Name是这个I，呃，这个ID，这个ID是这个name属性值来我们说。Name属性值OK，写完写完之后的话呢，请求发过去，发完之后啊，在这个方法中。获取什么quantity，再获取ID吧，然后呢啊要用service的方法做修改，这个方法我们是不是都已经准备好了呀。

这就可以了，实际上还需要获取个什么呀，还需要获取一个购物对象。在获取。获取。购物车对象，然后的话，根据往往修改购物车对象里边有这个方法。修改。Update。这个方法吧，你看你传个ID，这传我是不是直接直接可以改的，就这么改回来好吧，那改完之后的话呢。五我们怎么样，我得给我把数据给我传回来，我这个数据传什么回来呀，传什么回来啊，大家觉得你看我这个值改完之后，这个十变成一，是不是直接就变了呀，这是我写的，还有两个值吧，23变成14这个呃，价格11262变成758吧，所以说至少需要给我传回两个值，传回JC数据，传回杰森数据做什么呢？

有个呃，看这个跟这个一致吧，购物车里面的，我们看有个number。Book，好了，叉叉还有一个put money吧。对。Total money。

六。又怎么的？更新。当前页面的book number和把这个。看看哈，看看，首先的话呢，加个on change，然后请求地址，请求参数都搞定了，其中这个ID呢，啊，没地方有，于是的话呢，我改了一下name，我把这个name变成ID了，反正这个name也没用，因为这不是一个表单，然后啊，ID也有了，Qua也有了，就是禁用缓存的time，然后在这个方法里边获取这个值，调用方法说修改传回接森数据，修改它，更新它，OK，我们看一下这个流程啊，我们在这个里边的话呢，我以前直接请求到了一个点度哈，就直接有方法，那我们这块传的是3QUANTITY，还传了一个time，回传的是接数据，呃，Total book number，还有个total money，然后的话呢，页面上做修改就。

可以了，这就是我们整个AJX的流程，当然我们在加的时候的话呢，我们还可以加上一个这个说确认确认出确认。确认对话框是确定要修改吗？OK，那后边要再有的话呢，还有一个就是呃，关于AX修改这个商品数量的修验，你要输一个A的话不合法，负一也不合法，输入零的话。表示要进行删除，这个的话呢，大家可以一会儿写，也可以现在写这样的代码，在前面已经写过类似的再回来，我们把这个流程的话呢，详细都写写清楚了是吧？那如何传接算数据啊，如何这个把这个传传过去做修改啊，大家应该什么应该是挺熟悉的吧。A不是才学完吗？

使用j query j query的东西相当快。来写一写。起起来第一个说的什么呀？Ma减change。Function，然后校验的话呢，我们先不校验了啊，一会校验flag，我们现在我们就认为你填的一定是一个合法的整数。确定要修改吗？实际上应该写一个什么呀，确定要修改什么什么的数量吗？因为我我有可能不知道改的是哪个是吧，所以说确定要修改什么什么的数量吗？那这个什么什么呢。

反过来吧，CTRLC，我们看是不是这样。是吧，一样的拿过来。确定要修改什么什么的数量吗？Its flag。No flag吧，结束。否则继续。嗯。

URL等于不受累。括号等于。精神。Method。Update item quantity。ID括号IDY6等于谁呀？我这么写，直接这样可以是吧？this.name值，当然我们最好是给它。吹一下。

Name。I还有一个是quant quant是谁呀？哇。等于怎么写？Value。最后一个，嗨。好，开始发请求吧。这是长干的事啊，发请求点boss。UYL。啊，这些吧。这个返回一个好反映的话呢，等于点number number吧。

啊，Book number这是从那里边来的哈，Number好了，这一个photo money等于C，他点total money alot一个先啊，看看效果对不对。里面呢就写完了，然后的话呢，就搞这两个方法，第一个有个方法CTRLC。对。他姐呢？

一个是吧。C。最里边。在这第一个获取ID。等于request.d带有一个NT顺当str等于request。OK，我要去改。这样写啊，写完了，写完之后的话呢。Shopping car。Bookstore去改，这的是service.update。

I。C。ID还有一个quantity，这两个还得整出来是吧。In ID等于负一，In等于负一，哎，这块的话呢，有点讲究，我们先写啊，拆开。待会有啥想法？正常情况下这个值都是合法的，因为这个是不是在那个在在里边传的呀。正常情况下是合法的，但是呢，我们还是有可能给他改掉，我们还是有可能给他改掉，所以说这块我们还是得注意一下。

OK。不能放一起，那为啥啥不能放一起啊，你要这个出一长的话，我这个我是不是转不了了呀，OK，以前的话呢，都不放一起，大家想现在的话呢，为啥要放一起呢？因为你这要出一长的话，我底下这个转出就没意义了呀，再说一遍啊，你这个要出一长的话，我觉得你这个数就没意义了，所以说这个要放一起。因为你这个ID都不对的话，我就转不转我就没啥意义了，那我什么时候转呢？那我这个时候转if。If ID不等于负1ID转成功了，而且。Quantity。也不等于负一。再写ID，这么写应该写是吧，ID大于零，这样写好，而且框得大于零，只有这个时候这两个值都是正确的，我才转，否则我不转。

好了，这个时候的话呢，我来进行这个操作。操作去吧，转操作呀，这不好过呀，Xc.ID记得写完。他哪个。获取吧，修改吧，是吧，回来回来好了，改完之后呢。嗯，你改了。好了，然后的话呢，我需要说杰森，这个杰森的话呢，有这两个，我们我们知道去拼杰森是不是很困难啊，几个map吧，只是一个result等于687来。

点。变剑呢，是他。你是谁呀？值应该是我，我是不是传过去的，就是这个值。再来。这个呢操money。一点写完，然后我得把这个转为。Floats。

我把这个什么呀，通过这个把这个转为转为阶层吧。在哪呢？你看。Java open source。九。谷歌的杰森。放。复制过来复制。粘贴。好吧。杰森，好了，那我需要有一个结果，String，杰森，PR等于。精神点。兔先生吧。

完毕就是结果，这个结果的话呢，需要传回去，怎么传呢。传回去，传回去，传回去我得写成点。Context的是个什么呀？是个script对吧，是吧，数据嘛，点get out.o。点完了。这么穿好了看效果。看他鞠躬。下一页加加加查看。开发者工具。

注意这个改成二。是。看对了啊，Response。是吧？是不是我们希望的数据啊，这不是四吗？这不208了吗？是改了吧，四个208没问题。哎，这个挺好的，但是也有一个不好的地方是没跟我谈信息呀。是吧，我这个数据的话呢，已经回没给我弹信息，那怎么办呢？那他说一声吧，我弄的是计算数据。再来去购物，购物车。五啊，不行不行，七。99OK吧。这是成功了，大家再看我现在是七本啊，他说是七本，我实际上是九本了，你看我回来回来我是不是已经改了，服务器那边已经改成功了，我只要把这个数据再一改就可以了，那这两个数据怎么改，你去改我指定的地儿，什么地儿呢？这个勾中多少本书？

还有一个。这个价格价格这个还好写个ID吧。Out money。CTRLC。How money，井号的blue。当变为。一直是谁呀？加他吧，就这一个，还有个啥是不还有个这个呀。这玩意儿，这是一个文本，这个文本是不是没有在任何的这个东西里边啊，这个div吧。

这个div呢，也不大啊，就是为了给它包含起来说ID。Number。再写一个井号，点text变为您的购物车中有多少本书？The number。再不来。刷新一下OK，十大注意这个啊，变成12重要要。修改了这个A操作就可以了，整个这就完了，你看这个六。

敢。是七价格也改了，这就可以了，那下边的话呢，是不是还有一个关于这个的一个验证的问题啊。就是这一页。就是这一页，如果说的这个不合法的话，这个我们讲过了啊，怎么验证负数的话也不行，然后的话呢，如果是零的话，我直接执行一个删除操作。如果是零的话，我直接执行一个删除操作，这个删除的话呢，你也可以用HX或者是。呃，直接从页面跳转那也行，因为我们刚才做这个删除的时候。我刚才我我说这个删除我是不是没用HX啊，所以说这个的话呢，如果要是零的话，那你就怎么样，你也不用HX吧，你就你就直接删吧，一边跳一下也可以，反正就是这三个校验的话呢，大家还需要来写一下，那整个这个HX修改这部分就下来了。

就这么多，完全是按照我这个步骤写的，包括这里面，这里面我们怎么办，我们为了让我们写的这个东西，呃，写的这个数据返回不去拼串的话呢，我构建了一个map，然后呢，利用这个杰森的to杰森方法啊，把这个改成了一个接森字符串回传就可以了。OK，大家把这个看一下，同时呢，把验证这个写一下。校验我们看一下校验这个里边，我们看这个值呗。这个Y6呢，还是需要获取的啊。应该先来获取这个value上去。

ID这个。是Y6，我们得确保什么呀？们得确保这个值是一个合法的，呃，大于零的一个整数，首先过一个ing等于E，保证开始。结束有一个或者是多个。呃，整这个整形的数组成的，然后呢，If Ig.test。关注，如果这个要是不合法的话。告复合吧。因为我们下边我们还会有一个焦点，如果要是它要是一个小于零的数的话呢，也不行，所以说我们这块我们写个过一个flag吧，等于负，这个时候这个flag等于false OK OK，下一个如果。

Flag就是说如果呀，刚才那句要是过的话，我怎么呢，我再来给它转为一个过，给它转一个quantity。这样的一个数啊。ES里边的CL转为什么呢？转为框KSTRCTRLC，在这个基础上。那如果这个数要是要是小于。一的话也不行，是零也不行，好了，带和啊，这个时候也是flag等于for能写一起它俩。Yes。能写一起吗？把这个写为。

如果是这个是合法的，而且呢，而是怎么呢，如果这个这么写合法，然后把这个给它怎么呢？串进来吧，是吧，这个时候它是除法是这意思吧，好如如果要是不合法的话，那对不起了，就。不合法，然后直接对保存过来，嗯。什么，你说啥？打语音还行。啊零啊，是零的时候也可以是吧？是这意思吗？

小于零吧，对，就小于零吧，看一下继续购物看看。不好了，那个就会给我恢复回来。看见了吧？A，这不合法了是吧？但这个值你给我回来呀。挺麻烦的，就是说不合法这个校验的话呢，问题不大，1A1不合法一开始是几的是。你看六吧，你给我恢复回来吧，这个恢复回来啊，挺麻烦的。这咋恢复回来呀。你咋恢复回来呀？因为因为怎么了，因为这个，因为你这样一改的话，这60没有了呀，所以说你把这个六必须放个地儿，然后我才能我身能恢复吧，那我们想吧，我们这个隐扑的还有什么属性可以用好多属性，我们看比方说德class。

啊class class是谁呢？前提这个class不用啊，Class我们写为原生，这个值最大。CTRLC，如果class要是不让用的话呢，我们还可以写其他属性，或者说干脆后边放一个隐藏语都可以。我们一起放一个，放一个隐的情况吧。放一个隐藏域的呢，会跟上边的冲突吗？啊会跟上面的冲突，放一个隐藏域的会跟上面的冲突，那上面这个怎么样，我们就得特殊处理了啊，所以说我们先放这个里边换隐藏域也是可以的，就是说获取它下一个隐藏域的值那个也行，但是我要换隐藏域的话呢，它会跟我上面这个冲突，所以说我们这个就不用隐藏域了啊，我用它用class来写。

Class，那得给我恢复回来啊，不合法恢复回来。咋写啊，X减Y6变成。s.class的值。再回来，再刷来坏。Class，不让这样随便写。再写吧，这。点a tr。再上新来A。我改回来了，A6 OK，来负一负合法，来1A1不合法，11A不合法，行了焦原来。

变完之后的话呢，下一个问题是什么？是零吧，是零我要干什么呀？零是合法的啊，零的话我得干什么呀，零我得删了吧，那零是合法的呀。如果这个数小于零的话，哦，记错了，应该写什么大于零吧，是吧？对吧，那你就够嘛，再说。初一。户口本。您有。A等于零吧。是哪一个？就是。负一不合法。零。What？把没要修改了是吧，这应该删除吧，那大家注意看，我取消这个支出也得回来啊。

我取消六职得回来呀。那。取消呢？对。修改confirm，大家看我如果要是这样，我不能简单的看吧，这个值，这个值得回来吧。又不回来。保存再刷新，你看就是一些细节，这些细节的话呢，挺烦人的，五取消又回来了。零零，我们应该这个处理啊，好吧，那如果要是零的话呢，我们相当于是一个删除。写吧，If if什么呢？如果这个值是零。嗯。等于。

负一。他如果quant。等于零了，行删除吧，等一个吧。确定要删除什么什么的信息吗？删除什么什么的信息吗？删除什么什么么行好这个如果flag如果要删的话，主怎么写啊，跟删除是不是一样的。删除那我得整个地址啊。啊，那我这个时候怎么了，我这个时候是不是来找这个TR的这个A的这个和啊直接跑就可以了吧。

那怎么找啊？天儿在这儿呢？天往上走吧，这我得不得用上了呀。Oh he girl。哦，这个得往上同学们看啊。你是不是是不是得往上了呀，我这块需要用了呀。播放。然后呢，过一个等于谁呢？TR的find找什么呀？找TD最后一个吧。看的什么？哎，Find它的啥呀，它的A属性吧，At tr。CRA属性吧，然后window.on.location点等于就可以了，然后方结束。

扎心。零。珍珠都没了，零。删除继续购物来还是第二页来？60。56是吧，50。50。60点注意下一页加入购物车加几个呢？查看好了，注意那是回来，这是五的第二页啊，看看购物车，注意这个零。H、购物。坏了调节，这物种没了。第二页还有是吧，条件没了。那条件他咋就没了呢？因为以前啊，这个条件有没有的话，我们取决于什么呀，以前我们这个超链接我们找的是谁呀，我们是不是找的那个common里边那个方法呀。

在这儿呢，以前呢，我走的是这个方法A嘛，我说直接让这个a click了。那。你现在的话怎么办呢。嗯。你看以前的话呢，我直接我这样走了，我这边我还有个他呢，那我只能是怎么了，我只能我再获取一遍。CTRLC过来。回到我的这个里边来。删除。好了，这个等于它。这么写吧。

这个时候就没问题了。再看50。60末页上购物车，注意末页啊，查看来。零确定对吧，这个没问题了吧，但是这个写完之后的话，你是不是会感觉这个代码有点不爽啊，就是说我们随着这个功能的增多呀，你会发现这个代码会越来越多，越来越多，多到什么程度呢？多到会让人抓狂的程度。多到什么程度啊？多到当你觉得你已经不能够很容易的去控制它了，这个时候这个代码就应该优化了。我再说一遍啊，当代码多到我们感觉我已经控制不住的时候，我们就需要优化了，你有一天你跟你的这个女朋友男朋友是吧，你觉得你已经你已经hold不住他了，他天天晚上不回家，那这个时候你就要跟他谈了，你说这个时候我还不谈，那说明你也有问题。

就想分呗，反正我我我也想分了是吧，那个可以你天天晚上不回家，然后天天晚上在家等着，然后完了不还不跟他谈，肯定有问题，这块就是你看我这块这个代码的话呢，我虽然写上了是吧，但我是不是copy过来的呀，你会不会想诶那我能用到那里边的代码吗。哪个里边的。这个里边大家看这个A本身呢，有一个是这样，然后这样可以跑，那我现在的话呢，我这个节点A已经获取了，看见了吗。首先我们说这么写是可以的啊，然后的话呢，这块我这个节点A呀，我已经获取了，那我节点A既然已经获取的话，我能让这个A直接去触发它所有的那个事件吗。

再说一遍，我这个A呀，已经获取了，我在A上面是不是有个可利试件啊，我能不能把这个A获取完之后，我让这个A直接就把可利克试卷一跑，那多好啊，那于是呢。这个这个这个都给它干掉，然后。哎，我这不都干掉啊，这个需要留A嘛。3A他是啥呀？War。啊A，这个A吗？这个A目前是个是一个端午节点，好了A。零，我执行，可Li执行了。我想直接，可立刻就执行了，那我说呀。Click。

我这么执行行吗？我这么执行啥意思啊，我这样写啥意思啊，我要是这样写的话，这种写法叫什么呀，叫play。我这种写法大家看看啊，GS那个那个解包那找不着哈，这个cli实际上是不是我本身这个，哎叫什么呀，这个可方法实际上是不是我这个，呃，解query对象的一个方法呀，那你这块它是个啥呀。是不是盗墓对象，这就不行？起不来。那咋整，反正我目前想法比较简单，我就想执行看看啊，节点得到了是吧，到那个节点。得到了A节点好了，这边的话呢，我想执行非节点的on click前项函数，那正常情况下的话，我怎么执行，我得A一下吧。

是吧，正常情况下我需要按一下，那我目前这个，我目前这个情况呢。我们尝试怎么样啊，我们尝试着这样做过alert。你不是A节点吗？于是的话呢，我来获取A节点的。第一个元素的a click属性，这样获取完之后的话呢，发现这个值也没有，如果这个值能获取着的话，它应该是个函数，然后怎么办呢？然后我这样写就可以了，加括号它就执行了吗。好了，跑一下看一看什么情况。昨天已经跑了是吧，没行。

Copy。初始化数据库连接池。不应该这么慢吗？嗯。重新启动。而且这个也获取到了啊，再看。啊，这以后去找好加入购物车。查看。好了，我们看当这个值是零的时候，我跑一下确定删除，我们发现这个值是no那。

这个值是闹的话呢，其实就挺挺不爽的哈，这个值会是闹，那于是我们再看一下它吧。在这个里边comment里边，我们看当时是怎么被这个A加的click呢，我们用的我们怎么加的呀。是不是用结块RY加的，哎，我们以前写GS的时候怎么加呀，是不是a.on click等于什么呀，那个时候的话呢，是为其on click赋值，那现在的话呢，不是那么加的，那于是呢，我们那么加一下看看啊，CTRLX。那么加怎么加呀。点each，我为每一个都加function。然后是this.on click等于它。是这么回事吧，啊，我对这个进行便利，这个this不就是那个A节点吗？然后我让this的on click等于它好了保存了，于是我再算一下。

好了，再看一遍零。是大家看这个时候是不是能能看见那个方式呢，能看见方了，那下一个就好办了，怎么办呢。我让他执行。保存。再看刷新。零是啥？继续购物，OK，我们看其他的会不会受影响。60。下一页第二页，呃，AX回来不受影响，加入购物车，OK，查看，继续购物没问题，然后呢，查看，把这个变成零看。

确定OK，那那这个时候呢，我们是不是只在Chrome上面验证了呀，还怎么办呢，你要看一下在IE上好不好用，你只要在IE火狐和RO上都好用的话，其他那些小浏览器啊，我们可以忽略。99%用的都是类型浏览器嘛，是吧，所以说看一下A的CTRLC。看，加入购物车查看。零是啊，没问题，于是呢，这个就搞定了，跟我们昨天写的情况呢，基本上一样。那哪块不一样呢？就是我们在为这个呃，A节点。On click赋值的时候需要改一下，这个时候怎么赋的呀？是不是为这个A节点的on click属性赋值啊，那这个时候的话，在这块我就可以得到这个值，于是的话就OK，否则不行。

上来吧，这就中了。执行A节点的啊，可响应函数，然后这个方法就执行完了，大家看一下，哎，我通过这样的方式呢，可以解决。