Ajax修改购物车示例


1.购物车类的设计

ShoppingCartItem:书的封装,包括书名,数量,价格三个属性,以及对应的getter和setter方法。

ShoppingCart:购物车封装类,items为 Map<String, ShoppingCartItem> ,以及加入购物车,得到购物车中书的总数量以及总价格三个函数。

2:jsp加入购物车,超链接中带入书名以及价格

<body> 
<!-- 加入span的目的是为了定位 --> 
<div id="cartstatus"> 
您已经将 
<span id="bookName"></span>加入到购物车中,购物车中有 
<span id="totalBookNumber"></span>本书,总价格是 
<span id="totalMoney"></span> 
</div> 
<br> 
<br> 
java 
<a 
href="${pageContext.request.contextPath}/addToCart?id=java&price=100">加入购物车</a> 
<br> 
ajax 
<a 
href="${pageContext.request.contextPath}/addToCart?id=ajax&price=200">加入购物车</a> 
<br> 
jquery 
<a 
href="${pageContext.request.contextPath}/addToCart?id=jquery&price=300">加入购物车</a> 
<br> 
</body>
<!--${pageContext.request.contextPath}获取该项目的绝对路径 -->

3:addToCart -----servlet的设计

步骤如下:

1) :获取请求参数 id(bookName),price,是从jsp页面中的超链接来获取的

2):在session中获取购物车对象,如果session属性中没有购物车,则新建一个购物车对象放置在session属性中

3) : 加入购物车操作Shopping.addToCart(bookName, price);

4):想ajax传递Json对象,该对象包括 :{""bookName"":"totalBookNumber","totalMoney" },若从服务器端返回json对象,则属性名必须使用双引号!!

5):响应json请求,response.getWriter().print(json);

public class AddToCartServlet extends HttpServlet { 

public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
this.doPost(request, response); 
} 

public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
//1:获取请求参数 id(bookName),price 
String bookName =request.getParameter("id"); 
int price =Integer.parseInt(request.getParameter("price")); 
//2:获取购物车对象,在session中 
ShoppingCart sc=(ShoppingCart) request.getSession().getAttribute("sc"); 
if(sc==null){ 
sc=new ShoppingCart(); 
request.getSession().setAttribute("sc",sc); 
} 

//3;将点击的对象加入到购物车中 
sc.addToCart(bookName, price); 
//4:准备响应的Json对象:{""bookName"":"totalBookNumber","totalMoney" } 
//若从服务器端返回json对象,则属性名必须使用双引号!! 
StringBuilder sBuilder=new StringBuilder(); 
sBuilder.append("{") 
.append("\"bookName\":\""+bookName+"\"") 
.append(",") 
.append("\"totalBookNumber\":\""+sc.getTotalBookNumber()+"\"") 
.append(",") 
.append("\"totalMoney\":\""+sc.getTotalMoney()+"\"") 
.append("}"); 

//响应json请求 
response.setContentType("text/javascript"); 
response.getWriter().print(sBuilder.toString()); 
} 

}
上述中的用StringBuilder来拼接JSON字符串的方式可以借助第三方开源Jackson来简化实现:
String jsonStr=null; 
ObjectMapper objectMapper=new ObjectMapper(); 
jsonStr=objectMapper.writeValueAsString(sc);

4:ajax接受从服务器传来的参数{""bookName"":"totalBookNumber","totalMoney" }

步骤:

1):为加入购物车这个超链接增加单击响应函数,并取消默认行为(return false)

2):通过 HTTP GET 请求载入 JSON 数据。$.getJSON(url, [data], [callback])

准备url.agrs,并在回调函数内部将购物车中的内容显示在Jsp页面中。

3):通过jquery中的hide(),show()方法,判断是不是第一使用购物车,如果是第一次使用,则jsp页面不显示购物车。

<head> 
<!--${pageContext.request.contextPath}获取该项目的绝对路径 --> 
<script type="text/javascript" 
src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var isHasCart="${sessionScope.sc==null}"; 
if(isHasCart=="true"){ 
$("#cartstatus").hide();//隐藏显示的元素 
}else{ 
$("#cartstatus").show(); //显示隐藏的匹配元素 
$("#bookName").text("${sessionScope.sc.bookName}"); 
$("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}"); 
$("#totalMoney").text("${sessionScope.sc.totalMoney}"); 
} 

$("a").click(function(){ 
$("#cartstatus").show(); 
var url=this.href; //url属性 
var agrs={"time":new Date()}; //时间戳 
$.getJSON(url,agrs,function(data){ 
$("#bookName").text(data.bookName); 
$("#totalBookNumber").text(data.totalBookNumber); 
$("#totalMoney").text(data.totalMoney); 
}); 
return false; 
}); 
}); 


</script> 
</head>



相关阅读:
Win8.1系统关机命令变成重启问题解决方法
CentOS 6误删除的boot分区该如何还原恢复
Win10开机声音没有了怎么办?Win10开机声音设置方法图文详解
C#中的is和as操作符区别小结
C#实现客户端弹出消息框封装类实例
JavaScript 32位整型无符号操作示例
CSS行内元素和块级元素的居中实例分析
JavaScript使ifram跨域相互访问及与PHP通信的实例
浅析Android 手机卫士设备管理权限锁屏
在Linux系统中限制CPU占用率的教程
Android判断是否为飞行模式简单方法
浅析java 的 static 关键字用法
JavaScript sub方法入门实例(把字符串显示为下标)
JSP+jquery使用ajax方式调用json的实现方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 津市棠华站 湖南省常德市津市市
张家川汽车站 甘肃省天水市张家川回族自治县
九丝客运站 四川省宜宾市兴文县
宁洱梅子客运站 云南省普洱市宁洱哈尼族彝族自治县
枣庄凫城客运站 山东省枣庄市山亭区
小都长途汽车站 广东省梅州市五华县
平陵客运站 一一九省道
苏州阳澄湖客运站 江苏省苏州市相城区
上海长途汽车客运总站地下车库 中兴路1666号
禅城公共自行车服务点鸿运汽车站 广东省佛山市禅城区
蒲江寿安客运站 四川省成都市蒲江县
钟祥汽车客运中心站 湖北省荆门市钟祥市
中共融安汽车总站支部委员会 广西壮族自治区柳州市融安县
泰和汽车站 江西省吉安市泰和县
罗山弘运客运站 河南省信阳市罗山县
山东省三级汽车客运站 山东省威海市文登市
虞城木兰汽车站 河南省商丘市虞城县
辰溪火马冲镇汽车站 三零八省道
廊坊市长途汽车站朝阳分站 和平路
泸县太伏镇客运站 四川省泸州市泸县
中寨汽车站 贵州省六盘水市六枝特区
倒水客运站 广西壮族自治区梧州市长洲区
永仁宜就客运站 云南省楚雄彝族自治州永仁县
龙州客运站 广西壮族自治区崇左市龙州县
友谊红兴隆客运站 黑龙江省双鸭山市友谊县
富川柳家客运站 七二零县道
汾西客运站 山西省临汾市汾西县
大渔汽车站 龙魁线
黄渡汽车站 黄渡绿苑路
五一农场客运站 安屯东街与崇五路交汇处
高坪汽车站火车咨询点 四川省南充市高坪区
芙蓉汽车站 江苏省常州市武进区
来宾小平阳汽车站 广西壮族自治区来宾市兴宾区
寿光汽车站 潍坊市寿光市圣城街
七桥客运站 重庆市
苍南藻溪客运站 灵炎线
南湖汽车站 甘肃省酒泉市敦煌市
平顶山客运西站 建设路
石蟆客运中心 重庆市
黄土客运站 四川省绵阳市安县
铅山汽车站 江西省上饶市铅山县
原阳齐街乡汽车客运站 齐街乡
习水城西汽车客运站 交通西路
深州护池车站 河北省衡水市深州市
汝州尚庄乡客运站 河南省平顶山市汝州市
中国移动客运总站特许店 内蒙古自治区鄂尔多斯市东胜区
宝山汽车客运站 云南省曲靖市宣威市
简阳石桥汽车站 四川省资阳市简阳市
梁水镇客运站 山东省聊城市东昌府区
清镇市社会客车站 贵州省贵阳市清镇市
吕梁市汽车站 山西省吕梁市离石区
大端车站 广东省肇庆市高要市
溧水晶桥客运站 江苏省南京市溧水县
大石桥建一客运站 辽宁省营口市大石桥市
荆州沙市长途汽车客运站 公园路4号
莲湖客运站 江西省上饶市鄱阳县
重庆龙头寺长途汽车站 重庆火车北站旁
客运中心出站口 四川省泸州市合江县
五营区公路客运站 工商路4
成山客运站 山东省威海市荣成市
双加客运站 四川省泸州市龙马潭区
湘潭汽车西站售票厅 湖南省湘潭市雨湖区
衡龙桥客车站 湖南省益阳市赫山区
杨屯客运站 河南省驻马店市上蔡县
邹城城前客运站 山东省济宁市邹城市
北城汽车站 山西省临汾市尧都区
泗沥客运站 江西省鹰潭市贵溪市
智仁乡车站 双店线
官桥汽车站 山东省泰安市新泰市
长途汽车站-公交车站 河北省张家口平门路副25号
阳高东双寨客运站 山西省大同市阳高县
楚雄新村客运站 云南省楚雄彝族自治州楚雄市
宜章汽车西站 民主西路
袁市汽车站 四川省广安市邻水县
崇阳客运总站 湖北省咸宁市崇阳县
汕头南方高速客运 珠池路71号
汾阳三泉汽车站 山西省吕梁市汾阳市
丰城城西汽车站 江西省宜春市丰城市
溪江汽车站 湖南省衡阳市衡阳县
河源源城汽车客运站 河源大道南
大围山车站 湖南省长沙市浏阳市
延庆站(客运站) 北京市延庆县八达岭联线附近
安塘客运站 广东省云浮市云城区
高安汽车站 江西省宜春市高安市
三星客运站 广西壮族自治区南宁市上林县
松柏汽车站 思明区莲岳路211号(近公交武夷工贸站)
唐庄汽车客运站 河南省郑州市登封市
万州龙沙客运站 永安路附近
南京盘城客运站 盘新路盘锦花园旁
扶风黄堆汽车站 陕西省宝鸡市扶风县
浠水客运总站白莲车站 湖北省黄冈市浠水县
施甸水长客运站 水长乡水长村
南汇汽车站 浙江省嘉兴市秀洲区
包头长途客运总站 站北西路3
涞水王村乡客运站 河北省保定市涞水县
张卜客运站 陕西省西安市高陵县
昆明汤丹镇客运站 云南省昆明市东川区
丁集客运站农贸市场 安徽省六安市裕安区
普利司通轮胎汽车东站店 花园路17号
蓬溪汽车站 四川省遂宁市蓬溪县

Copyright © 2016 phpStudy |