有人在吗？问一个用JS删除淘宝商品的问题_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：99,872贴子：
有人在吗？问一个用JS删除淘宝商品的问题收藏
由于代码太长，第一楼先不发问题。折磨来好一段时间，还差一步了，求大神帮帮忙，谢谢！
三叔正版授权网游公测！
&style&body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px&宋体&,&Arial Narrow&,HELVETICA;background:#-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:none} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:border-spacing:0} p{word-wrap:break-word}#choice{ position:margin-left:31 margin-top:10 width:200 height:30}#choice span{margin-left:8 font-size:14 font-weight:600;}#total{position: right:23 top:10}#total input{width:100}#total span{font-size:14 font-weight:600;}#commodity{width:990margin-left:8 position:}.list{ margin-left:8 margin-bottom:50width:990 height:125 border:1px solid #999;}.list li{height:125 background:#F9F9F9; float:}.list li input{position: left:15 top:13}.list li img{position: top:13}.list li .describe{position: left:15 top:13 width:227 word-break:break- line-height:150%;}.list li .color{position: left:30 top:13 width:175 word-break:break- color:#999;line-height:150%;}.list li .price{position: left:50 top:13 color:#000; font-size:20 font-weight:900;}.list li .num{width:80 height:25 position: top:13 left:30 }.list li .num .sub{width:20 height:25 background:#E6E6E6; float: text-align: line-height:25 cursor:}.list li .num .add{width:20 height:25 background:#E6E6E6; float: text-align: line-height:25 cursor:}.list li .num .amount{width:38 height:23 border:1px solid #CCC; float: text-align: line-height:23}.list li .money{position:top:13 left:35font-size:20 font-weight:900; color:#C30;}.list li .remove{position: top:15 left:5 font-size:14 color:#666;}.list li a.remove:hover{color:#F30;}&/style&这是样式，初始化代码我是用腾讯的
&script&function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var i=0; for(i=0;i&aEle.i++) {
if(aEle[i].className==sClass)
aResult.push(aEle[i]);
} } return aR}function toSmallNumble(num)//四舍五入取2位2小数{ return num.toFixed(2)}window.onload=function(){ var oChoiceBtn=document.getElementById('choice'); var oBtn=oChoiceBtn.getElementsByTagName('input')[0]; var oRemoveBtn=oChoiceBtn.getElementsByTagName('input')[1]; var oCommodity=document.getElementById('commodity'); var aBtn=oCommodity.getElementsByTagName('input'); var aMoney=getByClass(oCommodity,'money'); var oTotal=document.getElementById('total').getElementsByTagName('input')[0]; var aSub=getByClass(oCommodity,'sub'); var aAdd=getByClass(oCommodity,'add'); var aValue=getByClass(oCommodity,'value'); var aPrice=getByClass(oCommodity,'price'); var aRemove=getByClass(oCommodity,'remove'); var aDiv=getByClass(oCommodity,'list'); var e=0; var i=0; var sum=0; oBtn.onclick = function ()
for (i = 0; i & aBtn. i++)
if (aBtn[i].type == 'checkbox') //type是类型的意思
aBtn[i].checked = oBtn.
if (oBtn.checked)
//aMoney代表的是页面中所有的价格，而你这里却是循环所有的复选框
//所以每循环一次，就把所有价格都加一遍，导致总价错误
//这里应该计算当前复选框以下的价格，这样才是算选中商品的总价
var bMoney = getByClass(aBtn[i].parentElement.parentElement, 'money');
//变量i，改成j，这里和最上面的i重复，导致全选按钮只选中第一个
for (var j = 0; j & bMoney. j++)
sum += parseFloat(bMoney[j].innerHTML);
oTotal.value = toSmallNumble(sum);
oTotal.value =0.00
} for(i=0;i&aBtn.i++) {
aBtn[i].index=i;
aBtn[i].onclick=function()//当点击的次数增加的时候，价格也会变。实际需要的是，价格不随点击变化，而是随数量变化
var val = 0;
var add=0;
if(!this.checked)
oBtn.checked =
val=-parseFloat(aMoney[this.index].innerHTML);
for(i=0;i&aBtn.i++)
sta *= aBtn[i].
}//判断所有的aBtn是不是被选上，如果有一个不被选上就返回false(0)
oBtn.checked =
val=parseFloat(aMoney[this.index].innerHTML);
add = parseFloat(oTotal.value)+
oTotal.value=toSmallNumble(add)
//四舍五入后，就会变字符串了，字符串链接是不行的,所以引入新变量
} } for(i=0;i&aRemove.i++) {
aRemove[i].index=i;
aRemove[i].onclick=function()
oCommodity.removeChild(aDiv[this.index]);
if(oBtn.checked)
e=oTotal.value=parseFloat(oTotal.value)-parseFloat(aMoney[this.index].innerHTML);
oTotal.value=toSmallNumble(e)
} } toAdd() toSub()}function toAdd(){ var oChoiceBtn=document.getElementById('choice'); var oCommodity=document.getElementById('commodity'); var aMoney=getByClass(oCommodity,'money'); var aAdd=getByClass(oCommodity,'add'); var aValue=getByClass(oCommodity,'value'); var aPrice=getByClass(oCommodity,'price'); var oTotal=document.getElementById('total').getElementsByTagName('input')[0]; var aBtn=oCommodity.getElementsByTagName('input'); var oBtn=oChoiceBtn.getElementsByTagName('input')[0]; var a=0; for(var i=0;i&aAdd.i++) {
aAdd[i].index=i;
aAdd[i].onclick=function()
aValue[this.index].innerHTML++;
var j=aValue[this.index].innerHTML;
var c=aMoney[this.index].innerHTML=toSmallNumble(parseFloat(j*aPrice[this.index].innerHTML))//数量与价格的乘积
if(aBtn[this.index].checked||oBtn.checked)
a=parseFloat(oTotal.value)+parseFloat(aPrice[this.index].innerHTML)
oTotal.value=toSmallNumble(a)
} }}function toSub(){ var oChoiceBtn=document.getElementById('choice'); var oCommodity=document.getElementById('commodity'); var aMoney=getByClass(oCommodity,'money'); var aSub=getByClass(oCommodity,'sub'); var aValue=getByClass(oCommodity,'value'); var aPrice=getByClass(oCommodity,'price'); var oTotal=document.getElementById('total').getElementsByTagName('input')[0]; var aBtn=oCommodity.getElementsByTagName('input'); var oBtn=oChoiceBtn.getElementsByTagName('input')[0]; var b=0; for(var i=0;i&aSub.i++) {
aSub[i].index=i;
aSub[i].onclick=function()
aValue[this.index].innerHTML--;
if(aValue[this.index].innerHTML&1)//这是小于1,innerHTML的属性,导致不能是小于等于.
aValue[this.index].innerHTML=1;//这里不能是双等号,innerHTML后面不能是双等于
var j=aValue[this.index].innerHTML;
var c=aMoney[this.index].innerHTML=toSmallNumble(parseFloat(j*aPrice[this.index].innerHTML))//数量与价格的乘积
if(aBtn[this.index].checked||oBtn.checked)
b=oTotal.value=parseFloat(oTotal.value)-parseFloat(aPrice[this.index].innerHTML);
oTotal.value=toSmallNumble(b)
} }}&/script&这是JS代码
&body&&div id=&choice&&
&label&&input type=&checkbox& /&&span&全选&/span&&/label&&/div&&div id=&total&&
&span&总价:&/span&&input type=&text& value=&0.00&/&&/div&&div id=&commodity&&
&div class=&list&&
&li style=&width:40& &&input type=&checkbox& value=&188.23& /&&/li&
&li style=&width:83& &&img src=&n1.jpg& /&&/li&
&li style=&width:227&&&p class=&describe&&高档&/p&&/li&
&li style=&width:175&&&p class=&color&&颜色分类&/p&&/li&
&li style=&width:125&&&p class=&price&&188.23&/p&&/li&
&li style=&width:125&&&div class=&num&&&a href=&#& class=&sub&&-&/a&&div class=&amount&&&span class=&value&&1&/span&&/div&&a href=&#& class=&add&&+&/a&&/div&&/li&
&li style=&width:125&&&p class=&money&&188.23&/p&&/li&
&li style=&width:90&&&a href=&#& class=&remove&&删除该商品&/a&&/li&
&div class=&list&&
&li style=&width:40& &&input type=&checkbox& value=&183.10& /&&/li&
&li style=&width:83& &&img src=&n2.jpg& /&&/li&
&li style=&width:227&&&p class=&describe&&高档&/p&&/li&
&li style=&width:175&&&p class=&color&&颜色分类&/p&&/li&
&li style=&width:125&&&p class=&price&&183.10&/p&&/li&
&li style=&width:125&&&div class=&num&&&a href=&#& class=&sub&&-&/a&&div class=&amount&&&span class=&value&&1&/span&&/div&&a href=&#& class=&add&&+&/a&&/div&&/li&
&li style=&width:125&&&p class=&money&&183.10&/p&&/li&
&li style=&width:90&&&a href=&#& class=&remove&&删除该商品&/a&&/li&
&div class=&list&&
&li style=&width:40& &&input type=&checkbox& value=&200.00& /&&/li&
&li style=&width:83& &&img src=&n3.jpg& /&&/li&
&li style=&width:227&&&p class=&describe&&高档&/p&&/li&
&li style=&width:175&&&p class=&color&&颜色分类&/p&&/li&
&li style=&width:125&&&p class=&price&&200.00&/p&&/li&
&li style=&width:125&&&div class=&num&&&a href=&#& class=&sub&&-&/a&&div class=&amount&&&span class=&value&&1&/span&&/div&&a href=&#& class=&add&&+&/a&&/div&&/li&
&li style=&width:125&&&p class=&money&&200.00&/p&&/li&
&li style=&width:90&&&a href=&#& class=&remove&&删除该商品&/a&&/li&
&/div&&/div&&/body&
最后的是HTML，这个代码虽然还不是最简洁的，但是几乎完美了。我发现还有一个问题，就是删除商品的时候。不要全选商品，一个个选择，在这里面的就是选择两个商品，然后删除在checked状态下的其中一个，价格没减少，怎么做？这是问题啦···谢谢
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&jQuery实现购物车多物品数量的加减+总价计算&/title&
&script type=&text/javascript& src=&/jquery-1.6.1.min.js&&&/script&
$(function(){
$(&.add&).click(function(){
var t=$(this).parent().find('input[class*=text_box]');
t.val(parseInt(t.val())+1)
setTotal();
$(&.min&).click(function(){
var t=$(this).parent().find('input[class*=text_box]');
t.val(parseInt(t.val())-1)
if(parseInt(t.val())&0){
setTotal();
function setTotal(){
$(&#tab td&).each(function(){
s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
$(&#total&).html(s.toFixed(2));
setTotal();
&table id=&tab&&
&span&单价:&/span&&span class=&price&&1.50&/span&
&input class=&min& name=&& type=&button& value=&-& /&
&input class=&text_box& name=&& type=&text& value=&1& /&
&input class=&add& name=&& type=&button& value=&+& /&
&span&单价:&/span&&span class=&price&&3.95&/span&
&input class=&min& name=&& type=&button& value=&-& /&
&input class=&text_box& name=&& type=&text& value=&1& /&
&input class=&add& name=&& type=&button& value=&+& /&
&p&总价：&label id=&total&&&/label&&/p&
本文实例讲述了jQuery实现购物车计算价格功能的方法。分享给大家供大家参考。具体如下： 目的 实现在html界面修改购物车的件数，购物车商品价格的小计和总计要修改。 实现思路 1.当点击进入界面，刷新的时候触发body内的onload=&&方法，跳转到JS代码。这样做的原因是在数据库内我们只会存储某客户的准备购买的商品件数，而不会存储每类商品价格的小计和购物车内所有物品的商品
商品信息使用JSON数据来模拟
同一个产品点击多次，不会重复添加，而是在已有的基础上数量+1，
商品数量也可以手动输入，当输入0时，该商品将自动从购物车删除（点击减号到小于1时，也会提示是否从购物车删除商品信息）
每个产品的价格和总价都会根据添加和删除的操作来动态计算
附下载链接： /201112/yuanma/jquery_gouwuche.rar
基本的功能都已经实现， 建议使用IE
我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字
该购物车的功能如下： . 通过ajax实现添加和删除车上的物品。 . 删除的物品会显示出来，可以重新添加到购物车。 . 嗯...没有了，具体大家接着看吧。
购物车的结构我打算用一个table来展示，在UserControl里使用ListView展现购物车的物品（因为比拼接字符串要容易维护的多）。具体代码如下（ShopCartTest.ascx）：
&asp:ListV
这样一来，购买者只需要把自己感兴趣的商品拖曳到自己的购物车中，也可以从购物车中删除商品 同时更新购物车的总体价格和数量。 那咱们就开始实例吧，本实例并没有链接数据库读取数据来初始化Products,而是创建了一些虚拟的商品如下： 1、 创建Product实体类
public class Product { public string Code { } pu
//购物车session的产生代码 if(! $session && ! $scid) { /* session用来区别每一个购物车，相当于每个车的身份证号； scid只用来标识一个购物车id号，可以看做是每个车的名字； 当该购物车的id和session值两者都不存在时，就产生一个新购物车 */ $session = md5(uniqid(rand())); /* 产生一个唯一的购
即以游客身份登录网站时以cookie的方式存储购物车，而以登录用户的身份进入时将购物车信息存储到数据库中去，若是先以游客身份完成购物再登录继续购物，则将cookies购物车存入数据库； 其中涉及到的存储过程主要如下： 一：已登录会员添加商品到购物车功能：
/* @store_sum表示要添加的商品数量,添加同时确认购物车中自己已有的数量与将要加入的数量之和是否超过库存 */
JavaScript实现的购物车效果，当然这个效果可以运用在好多地方，比如好友的选择，人力资源模块，计算薪资，人员的选择等等。下面看类似某种购物车的效果图：
goodsCar.js:这个js写成了一个单独的文件。主要是控制上面的列表显示的。
window.onload=function(){ initStore(); }; var goods=[&
android一般用什么技术实现购物车的功能？ 最近在做一个网上商城的app，其中有购物车的功能，想问下大神们一般都是用哪些技术实现购物车功能的呢？SharedPreferences？还是SQLite？或者直接用服务器的数据库？哪个方便些呢？
------解决方案-------------------- 当然是服务器的数据库咯
android 添加购物车动画实现
此代码还有一些问题，不过需要的自己改改吧...
一，购物车概述购物车是为消费者在网上购物中提供一个临时存储商品的地方。其主要功能包括：添加商品、删除商品、更改商品数量、商品金额小计、商品金额总计和清空购物车；还包括生成订单、订单打印、订单预览、提交订单和取消购物等。购物车的操作流程：首先，登录到网站中浏览商品；然后，购买指定的商品，进入购物车页面中，在该页面可以实现更改商品数量、删除商品、清空购物车、继续购物等；最后，填写收货人信息，生成订单，
android购物车遇到的问题
最近 做购物车的时候 ，遇到几个问题，现在 总结如下： 1：不让listview复用组件(购物车，或者有特殊操作的时候)： 自己保存所有的view对象
public View getView(final int position, View convertView, ViewGroup parent) { final DaydayCouponBean bean
if(! $session && ! $scid) { /* session用来区别每一个购物车，相当于每个车的身份证号； scid只用来标识一个购物车id号，可以看做是每个车的名字； 当该购物车的id和session值两者都不存在时，就产生一个新购物车 */ $session = md5(uniqid(rand())); /* 产生一个唯一的购物车session号 rand()先
ShopCar.php
&?php class Shopcar { //商品列表 public $productList=array(); /** * * @param unknown_type $product 传进来的商品 * @return true 购物车里面没有该商品 */ public function checkProduct($product) { fo
首先载入jQuery库文件和jquery.fly.min.js插件。
&script src=&jquery.js&&&/script&
&script src=&jquery.fly.min.js&&&/script&
接着，将商品信息html结构布置好，本例中，我
$(function(){ $(&.child_tab tr:last-child&).find(&td&).css({borderBottom:'none'}) //获得文本框对象 var t = $(&.amount-input&); //数量增加操作 $(&.amount-up&).click(f
listview 购物车布局
android开发，求一个类似的UI布局~~~ ！！
------解决方案-------------------- 左边一个ImageView
然后右边一个LinearLayout包括上面的title和下面的详细商品布局。
再右边价格，再右边一个ImageView
整个外面套一层RelativeLayout
今天在公司实在没有事做，突然就想到写下商城的购物车的前端框架，当然我这里只有购物车的增删改查，也许写的并不是那么完善，但最重要的是一个入门，也希望js达人给些建议，好让我更上一个台阶。 HOHO~~~开始咯： Js：
//为了省事，就没写自己的js ajax了 用了jquery的，当然你也可以添加到jquery的扩展方法内,哈哈，我太懒了，所以就写这里了。 var _$ =
首先，购物车的数据库设计： 1. id 2. goods_id 商品ID 3. session_id 购物车ID 4. goods_sn 商品编码 5. goods_name 商品名称 6. shop_price 商品商城售价 7. goods_price 商品真实售价（与shop_price的区别在于，当打折的时候，shop_price是打折之前商品的售价，而goods_price是打折之后的）
安卓动画为了，写购物车动画，搜集的安卓动画的代码
Animations
一、Animations介绍
Animations是一个实现android UI界面动画效果的API，Animations提供了一系列的动画效果，可以进行旋转、缩放、淡入淡出等，这些效果可以应用在绝大多数的控件中。
二、Animations的分类
全选按钮的实现为：
&input type=&checkbox& name=&all& onclick=&checkAll()& /&全选&br /& &input type=&checkbox& name=&item& v
/***************************************************************************************************** Name　　　　购物车 Version　　　　1.1 Author　　　　Vanni(凡林)url:QQ: C
/***************************************************************************************************** Name　　　　购物车 Version　　　　1.1 Author　　　　Vanni(凡林)url:QQ: C
引言： 今天周末没事，就想起前面自己做的一个B2C的电子商务平台，还有些一些地方没有完善，就想着完善，嗯，问题是这样的，在电子商务平台中有这样一个场景，我将购物车放置在Session中，使其在整个购物的过程中都能从Session中得到购物车模型，我在购物车某型中有的商品都会在数据库中减少其购物车中购买的数量，但是如果我关闭窗口，怎样让Session中的购物车模型中的商品数量添加到数据库中，于是我查
下面是使用jquery实现的代码。 效果图：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/
购物车模块实现之Cookie+数据库（DB）方式
购物车模块实现的方式
session方式：购物车模块实现之多个浏览器之间的共享技术
Cookie+数据库（DB）方式
Cookie+数据库（DB）方式
每个用户初次访问网站时，需要为用户分配一个惟一的id（该id可以用UUID方式生成），并存放在cookie中； 使用过滤器类Filter在用户访问网站时判断cookie中是否存在id，不存
用php实现加减乘除计算器。代码很简单哦！
&?php header(&content-type:text/charset=utf-8&); session_start(); ?& &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &
&!DOCTYPE html& &html& &head& &title&MyCart1.html&/title&
&meta http-equiv=&keywords& content=&keyword1,keyword2,keyword3&& &meta ht
1、商品展示页面
&table width=&255& border=&0& cellspacing=&0& cellpadding=&0&& &tr& &td width=&130& rowspan=&6&&&
&%@ Page language=&c#& Codebehind=&shoppingcart.aspx.cs& AutoEventWireup=&false& Inherits=&myshop.shoppingcart& %&&!DOCTYPE HTML PUBLIC &-//W3C//D
部分购物网站用这个功能放购物车或商品分类导航，使产品页面很长的时候，侧边栏能始终固定发挥它应有的作用，有的网站用这个功能来边栏的广告。 jQuery代码：
var rollSet = $('#Roll');// 检查对象，#sidebar-tab是要随滚动条固定的ID，可根据需要更改 var offset = rollSet.offset(); $(window).scroll
表单部分：
&form action=&?action=edit_num& method=&post& name=&car&?php $c_rs['id'];?&& id=&car&?php $c_rs['id'];?&&& &input name=&qu
通过JavaScript 来计算当前图片加载的张数。 原理： 先定义一个图片的数组，然后通过image的onload事件来计算，注意，onload在ie和火狐有所不同。 最后需要一个进度条与之结合即可。 这个脚本在做游戏的地方用得比较多。 演示：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional
使用该函数，必须集成于jquery包
原理：当浏览器移动到某个指定位置时，该图层上浮，然后加入一个样式，让该div层定位于浏览器顶部
//控制头部购物车的显示 function fixshow(min_height){ min_height ? min_height = min_height : min_height = 830; $(window).scroll(func
今天要分享的是基于JQuery实现的多标签的切换，JQuery就不用过多介绍了，网上一搜一大堆资料，当然这样的小示例也有很多，这里只是发表一些自己的想法。
下面是本次示例所使用的HTML页面：
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01//EN& &http://www.w3.org/TR/
oracle时间加减的语句写法
oracle时间加减运算我们经常会用到，下面就为您介绍oracle时间加减的实现方法，如果您遇到过oracle时间加减的问题，不妨一看。
select sysdate,add_months(sysdate,12) --加1年
&%@ page language=&java& contentType=&text/ charset=utf-8& pageEncoding=&utf-8&%& &% String path = request.getContextPath(); String basePath = reque
在这里我们需要控制用户的输入验证，表格的添加删除，用户输入数据的统计聚合，还有相应的计算列比如商品的总价=商品的单价*商品数量，再如，同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库。本插件则简单的处理了这些繁琐的事情。 插件属性说明： 1：rowTemplate：这是插入列的模板，在模板中我们的序号这种行号标示的需要rownum 的class。在模板中的需要唯一编号的比
一个简单的jQuery计算器，只是实现了一个连续计算的功能
&!DOCTYPE html& &html& &head& &meta charset=&utf8&/& &title&Javascript计算器&/title& &/head& &body& &table&妙用Ajax技术实现局部刷新商品数量和总价实例代码
作者：eson_15
字体：[ ] 类型：转载 时间：
这篇文章主要给大家介绍妙用Ajax技术实现局部刷新商品数量和总价实例代码，非常不错，需要的朋友一起看看吧
1. 问题的分析
　　先看一下页面中的情况：
　　功能如上，在没有Ajax之前，一般都是根据用户修改的值去找Action，然后返回新的jsp页面重新加载整个页面，完成数字的更新。但是有了Ajax技术后，我们可以利用Ajax技术局部刷新要改变的地方，而不是重新加载整个页面。首先看一下上图对应的jsp部分的代码：
&div class="section_container"&
&!-- 购物车 --&
&div id="shopping_cart"&
&div class="message success"&我的购物车&/div&
&table class="data-table cart-table" cellpadding="0" cellspacing="0"&
&th class="align_center" width="10%"&商品编号&/th&
&th class="align_left" width="35%" colspan="2"&商品名称&/th&
&th class="align_center" width="10%"&销售价格&/th&
&th class="align_center" width="20%"&数量&/th&
&th class="align_center" width="15%"&小计&/th&
&th class="align_center" width="10%"&删除&/th&
&c:forEach items="${sessionScope.forder.sorders }" var="sorder" varStatus="num"&
&tr lang="${sorder.product.id}"&
&td class="align_center"&&a href="#" class="edit"&${num.count }&/a&&/td&
&td width="80px"&&img src="${shop}/files/${sorder.product.pic}" width="80" height="80" /&&/td&
&td class="align_left"&&a class="pr_name" href="#"&${sorder.name }&/a&&/td&
&td class="align_center vline"&${sorder.price }&/td&
&td class="align_center vline"&
&!-- 文本框 --&
&input class="text" style="height: 20" value="${sorder.number }" lang="${sorder.number }"&
&td class="align_center vline"&${sorder.price*sorder.number }&/td&
&td class="align_center vline"&&a href="#" class="remove"&&/a&&/td&
&/c:forEach&
&!-- 结算 --&
&div class="totals"&
&table id="totals-table"&
&td width="60%" colspan="1" class="align_left"&&strong&小计&/strong&&/td&
&td class="align_right" style=""&&strong&￥&span
class="price" id="total"&${sessionScope.forder.total}&/span&
&/strong&&/td&
&td width="60%" colspan="1" class="align_left"&运费&/td&
&td class="align_right" style=""&￥&span class="price" id="yunfei"&0.00&/span&&/td&
&td width="60%" colspan="1" class="align_left total"&&strong&总计&/strong&&/td&
&td class="align_right" style=""&￥&span class="total" id="totalAll"&&strong&${sessionScope.forder.total}&/strong&&/span&
&div class="action_buttonbar"&
&font&&a href="${shop}/user/confirm.jsp"&
&button type="button" title="" class="checkout fr" style="background-color: #f38256;"&订单确认&/button&&/a&
&font&&a href="#"&
&button type="button" title="" class=" fr"&
&font&清空购物车&/font&
&a href="${shop}/index.jsp"&
&button type="button" title="" class="continue fr"&
&font&继续购物&/font&
&/button&&/a&
&div style="clear:both"&&/div&
　　看着貌似很多的样子，其实功能很简单，就是从域中拿出相应的数据显示出来而已，我们现在要实现上面描述的功能的话，先来分析一下思路：
首先得注册一个事件：即修改了数量那里的文本框触发的事件；
在该事件中，我们拿到用户输入的数，判断输入的合法性，因为要防止用户乱输入；
如果合法，通过Ajax请求将数据发送到后台；
后台针对新的数量，调用相应的业务逻辑方法得到新的结果，并将其通过流返回到前台；
Ajax收到结果后，再对相应位置的数据进行更新。整个流程就走完了。
如果非法，则显示修改前的数字。不做任何处理
2. Ajax请求的实现
分析完了流程，接下来我们就着手去实现了，首先把js部分的代码贴在这，然后我们根据上面的流程详细分析：
&script type="text/javascript"&
$(function(){
//1. 注册事件
$(".text").change(function(){
//2. 验证数据的有效性
var number = this. //也可以使用$(this).val();
//isNaN(number)表示若number不是数字就返回真
if(!isNaN(number) && parseInt(number)==number && number&0){
//如果合法，同步更新的数
$(this).attr("lang", number);
//找到当前标签中第一个是tr的父节点，然后拿到属性为lang的值，也就是商品的id
var pid = $(this).parents("tr:first").attr("lang");
//发送Ajax请求，传输当前的数量与商品的id，返回修改数量后的总价格
$.post("sorder_updateSorder.action",
{number:number, 'product.id':pid},
function(total){
$("#total").html(total); //所有商品小计
var yunfei = $("#yunfei").html();
$("#totalAll").html((total*1 + yunfei*1).toFixed(2));//所有商品小计和运费的和
}, "text");
//计算单个商品的小计，保留两位小数
var price = ($(this).parent().prev().html()*number).toFixed(2);
$(this).parent().next().html(price);
//如果非法，还原为刚刚合法的数
this.value = $(this).attr("lang");
2.1 注册事件
　　我们看上面的代码可知，注册事件首先要定位到这个文本框，这里是通过类选择器来定位的，因为是文本框，所以用change()来注册该事件，然后在里面定义一个function()函数来处理该事件。
2.2 判断数据合法性
　　好了，注册好了事件后，我们首先要对用户输入的数进行合法性判断，因为用户可能输入了0或者负数，可能输入了小数，甚至输入了字母或其他字符等等。所以要进行验证。
isNaN(number)表示若number不是数字就返回真，我们可以用这个函数来判断是否为数字；parseInt(number)表示对数组进行取整，然后跟它自身进行比较，我们巧妙的运用了这个来判断number是否为整数。
2.3 发送Ajax请求
　　如果数据是合法的，我们获取该数据后，就可以向后台发送Ajax请求了，我们需要考虑一个问题：需要传哪些参数呢？首先用户想要更新数量，毫无疑问，用户输入的数字肯定要传过去，其次到底传哪个商品呢？也就是说我们需要获取用户想要修改的商品的id号，知道了要传的参数后，我们想办法获取id号即可。
　　这里有一个问题，用户的购物车里可能不止一件商品，很自然的会想到，如果能用一条语句可以拿到不同商品的id，就非常好了，因此，想到了可以使用该文本框的父标签，因为不同的商品它的父标签都一样，都是第一个&tr&标签，所以我们把商品的id放在那个&tr&标签中的lang属性里，为什么要放在lang属性里呢？因为lang属性基本不会用到，它是用来定义语言的，而且用lang属性还不容易和其他属性冲突~这样我们就可以通过$(this).parents("tr:first").attr("lang");来获取商品的id了。
接下来开始发送Ajax请求，使用post方式发送，post方法中有四个参数：
第一个参数是要发送到的Action
第二个参数是要传过去的参数，使用的是json格式
第三个参数是一个function(result)，result是用来接收后台穿过来的数据
第四个方式是规定接收什么类型的数据，json表示接收json数据，text表示接收流
　　从后台返回的total是所有商品的总价格，所以在function中，首先我们根据id拿到所有商品小计的元素然后赋值为total即可，totalAll是加了运费的总价，后面那个toFixes(2)表示保留两位小数。然后再拿到单个商品小计的元素，计算一下单个商品的小计，这样前台页面在没有重新载入的情况下，更新了我们想要更新的部分，这就是Ajax强大的地方，这个和前面EasyUI一样的，EasyUI也是Ajax请求。
　　 好了，关于Ajax部分到这里就介绍完了，下面是后台的处理刚刚的请求，是针对自己这个项目的，用来记录项目进度用的。
3. 后台的更新
　　刚刚Ajax请求的action是SortedAction中的updateSorder()方法，所以我们去SorderAction中完成updateSorder()方法：
@Controller
@Scope("prototype")
public class SorderAction extends BaseAction&Sorder& {
public String addSorder() {
//省略无关的代码……
//根据商品编号更新商品数量
public String updateSorder() {
Forder forder = (Forder) session.get("forder");
//更新购物项，传进来的product.id被封装到了model中
forder = sorderService.updateSorder(model, forder);
//计算新的总价格
forder.setTotal(forderService.cluTotal(forder));
session.put("forder", forder);
//以流的形式返回新的总价格
inputStream = new ByteArrayInputStream(forder.getTotal().toString().getBytes());
return "stream";
相应的Service中的方法完善如下：
//SorderService接口
public interface SorderService extends BaseService&Sorder& {
//省去无关的代码……
//根据商品id和数量更新商品数量
public Forder updateSorder(Sorder sorder, Forder forder);
//SorderServiceImpl实现类
@Service("sorderService")
public class SorderServiceImpl extends BaseServiceImpl&Sorder& implements
SorderService {
//省略无关的代码……
public Forder updateSorder(Sorder sorder, Forder forder) {
for(Sorder temp : forder.getSorders()) {
if(temp.getProduct().getId().equals(sorder.getProduct().getId())) {
temp.setNumber(sorder.getNumber());
最后struts.xml文件中的配置，是把”stream”配在了&global-result&里面，如下
&global-results&
&!-- 省去其他公共配置 --&
&result name="stream" type="stream"&
&param name="inputName"&inputStream&/param&
&/global-results&
　　 好了，现在Action中计算出的总价格就可以通过流的形式传到前台了，Ajax就可以在它的function中接收到，放到total中了，跟前面的就接上了。
以上所述是小编给大家介绍的妙用Ajax技术局部刷新商品数量和总价实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}