妙用埃阿斯技术实现局部刷新商品数量和总价实例代码

1.问题的分析

先看一下页面中的情况：

功能如上，在没有埃阿斯之前，一般都是根据用户修改的值去找行动，然后返回新的jsp页面重新加载整个页面，完成数字的更新。但是有了埃阿斯技术后，我们可以利用埃阿斯技术局部刷新要改变的地方，而不是重新加载整个页面。首先看一下上图对应的jsp部分的代码：

div class='section_container '！-购物车-div id=' shopping _ cart ' div class='消息成功'我的购物车/divtable类=' data-table cart-table '单元格填充=' 0 '单元格间距=' 0 ' trth类='align_center '宽度='10% '商品编号/thth class=' align _ left ' width=' 35% ' col span=' 2 '商品名称/thth class=' align _ center ' width=' 10% '销售价格/thth class=' align _ center ' width=' 20% '数量/thth class=' align _ center '宽度=' 15% '小计/thth class=' align _ center ' width=' 10% '删除/th/TRC : foreach项=' $ {会话范围。 福德。sorders } ' var=' sorder ' VarStatus=' num ' tr lang=' $ { sorder。产品。id } ' TD class=' align _ center ' a href=' # ' class=' edit ' $ { num。count }/a/tdtd width=' 80px ' img src=' http 3360 $ { shop }/files/$ { sorder。产品。pic } '宽度=' 80-文本框-input class=' text ' style=' height : 20px；value=' $ { sorder。number } ' lang=' $ { sorder。number } '/tdtd class=' align _ center vline ' $ { sorder。价格*肮脏。number }/tdtd class=' align _ center vline ' a href=' # ' class=' remove '/a/TD/tr/c : foreach/table！-结算-div class=' totals ' table id=' totals-table ' tbodytrtd width=' 60% ' col span=' 1 ' class=' align _ left ' strong小计/strong/tdtd class=' align _ right ' style=' strongspan class=' price ' id=' total ' $ { session scope。福德。total }/span/strong/TD/trtd width=' 60% ' col span=' 1 ' class=' align _ left '运费/tdtd class=' align _ right ' style=' 'span class=' price ' id='云菲0.00/span/TD/trtd宽度=' 60% ' colspan=' 1 ' class=' align _ left total ' strong总计/strong/tdtd class=' align _ right ' style=' 'span class=' total ' id=' total all ' strong $ { session scope。福德。total }/strong/span/TD/tr/t body/tablediv class=' action _ button bar ' font a href=' $ { shop }/user/confirm。JSP ' button type=' button ' title=' class=' check out fr ' style='底色： # f 38256'订单确认/button/a/font font a href=' # ' button type=' button ' title=' class=' fr ' font清空购物车/font/button/font a href=' $ { shop }/index。JSP ' button type=' button ' title=' class=' continue fr ' font继续购物/font/button/adiv style=' clear : both '/div/div/div看着貌似很多的样子，其实功能很简单，就是从域中拿出相应的数据显示出来而已，我们现在要实现上面描述的功能的话，先来分析一下思路：

首先得注册一个事件：即修改了数量那里的文本框触发的事件；

在该事件中，我们拿到用户输入的数，判断输入的合法性，因为要防止用户乱输入；

如果合法，通过埃阿斯请求将数据发送到后台；

后台针对新的数量，调用相应的业务逻辑方法得到新的结果，并将其通过流返回到前台；

埃阿斯收到结果后，再对相应位置的数据进行更新。整个流程就走完了。

如果非法，则显示修改前的数字。不做任何处理

2.埃阿斯请求的实现

分析完了流程，接下来我们就着手去实现了，首先把射流研究…部分的代码贴在这，然后我们根据上面的流程详细分析：

脚本类型=' text/JavaScript ' $(function(){//1。注册事件$('。文本')。Change (function () {//2。验证数据var number=this.value的有效性；//也可以使用$(this)。val()；//isNaN(number)表示如果(！isnan(number)par sent(number)==number number 0){//如果合法，同步更新次数为$(this)。attr('lang '，数字)；//找到当前标签中的第一个父节点即tr，然后得到带有属性lang的值，即id var PID=$ (this)。家长(' tr3360first ')。商品的attr(' lang ')；//发送Ajax请求，传输当前数量和商品id，修改数量$，返回总价。post ('s order _ updates order。动作'，{number: number，'产品。id' : PID}，函数(总计){$ ('# total ')。html(总计)；//所有商品小计var云菲=$(' #云菲')。html()；$('#totalAll ')。html((总计*1云菲*1)。toFixed(2))；//所有货物小计和运费之和}，' text ')；//计算单个商品的小计，保留两位小数var price=($ (this)。父项()。prev()。html () *数字)。to fixed(2)；$(这个)。父项()。下一个()。html(价格)；} else {//如果是非法的，恢复到合法的数字this.value=$(this)。attr(' lang ')；}})})/script2.1注册事件。

从上面的代码中我们可以看到，注册一个事件必须首先位于这个文本框中，并且在这里它是通过类选择器来定位的。因为它是一个文本框，所以使用change()来注册事件，然后在其中定义一个函数()来处理事件。

2.2判断数据的有效性。

好了，注册事件后，我们首先要判断用户输入的数字是否合法，因为用户可能已经输入了0或者负数、小数、甚至字母或者其他字符等等。因此，需要验证。

IsNaN(number)表示如果number不是数字，它将返回true。我们可以用这个函数来判断它是不是一个数字。parsent(number)意味着对一个数组进行舍入，然后将其与自身进行比较。我们巧妙地利用这一点来判断数字是否为整数。

2.3发送Ajax请求。

如果数据是合法的，我们可以在获得数据后向后台发送Ajax请求。我们需要考虑一个问题：我们需要通过哪些参数？首先，用户想要更新数量。毫无疑问，用户输入的号码必须传递。其次，应该传承哪种产品？也就是说，我们需要获取用户想要修改的产品的id号。知道了要传输的参数后，我们就可以找到获取id号的方法。

这里有一个问题。用户的购物车中可能有多个商品。自然，在一句话中获得不同项目的id会非常好。因此，认为可以使用该文本框的父标签。因为不同项目的父标签是相同的，它们都是第一个tr标签，所以我们把项目的id放在那个tr标签的lang属性中。为什么把它放在lang属性里？因为lang属性基本不用，是用来定义语言的，不容易和其他属性冲突~所以我们可以通过$ (this)。家长(' tr3360first ')。attr(' lang ')；获取商品的id。

接下来，开始发送Ajax请求，并以post方法发送它们。post方法有四个参数：

第一个参数是要发送到的操作。

第二个参数是要传递的参数，它是json格式的。

第三个参数是一个函数(结果)，用于从后台接收数据。

第四种方法是指定接收什么类型的数据。json表示接收json数据，text表示接收stream。

从后台返回的Total是所有商品的总价，所以在函数中，我们首先根据id得到所有商品的小计元素，然后分配给total，total是加上运费的总价，下面的toFixes(2)表示保留两位小数。然后得到单个商品小计的元素，计算出单个商品的小计，这样前台页面就更新了我们想要更新的部分，而不需要重新加载。这就是Ajax强大的地方。这和之前的EasyUI是一样的，EasyUI也是一个Ajax请求。

好了，关于Ajax的介绍到此结束。这是刚才请求的后台处理，针对这个项目，用来记录项目的进度。

3.后台更新。

刚才Ajax请求的动作是SortedAction中的updateSorder()方法，所以我们转到SorderAction来完成updateSorder()方法：

@ controller @ scope ('prototype ')公共类sorteraction扩展了base actionsorder { public string add order(){//省略无关的代码.//根据商品编号更新商品数量公共字符串更新订单(){ for der for der=(for der)session . get(' for der ')；//更新购物项，传入的product.id封装在model for der=sorterservice . updatesorder(model，for der)中；//计算福特的新总价。SetTotal (ForderService。clu total(Forder))；session.put('forder '，forder)；//返回新的总价inputstream=new ytearray inputstream(对于der。gettotal()。tostring()。getbytes())作为流；返回“stream”；}}相应服务中的方法改进如下：

///SorderService接口公共接口sorterservice扩展了baseserviceorder {//省略不相关的代码.//根据商品id和数量更新商品数量，订单更新订单(订单更新订单，订单更新订单)；}//SorderServiceImpl实现类@ service(' SorderServiceImpl ')公共类SorderServiceImpl扩展了baseServiceImplSorder ImplementsOrderService {//省略不相关的代码……@为der updates order (s order s order，Forder Forder){ for(Sorder temp : Forder . getsorders()){ if(temp . getproduct()。getId()。equals(sorder.getProduct()。getId())){ temp . setnumber(sorder . getnumber())；} }返回forder}}最后，struts.xml文件中的配置是匹配global-result中的“stream”，如下所示。

全球-结果！-保存其他公共配置-结果名称=' stream '类型=' stream '参数名称=' input name ' input stream/param/result/global-results。现在，Action中计算的总价可以以流的形式传输到前台，Ajax可以在其函数中接收并放入total，与前一个相连接。

以上是利用边肖推出的Ajax技术在本地刷新商品数量和总价的示例代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！