Ajax修改购物车示例

1.购物车类的设计

购物卡项目：书的封装，包括书名，数量，价格三个属性，以及对应的吸气剂和作曲者方法。

购物车：购物车封装类，项目为MapString，ShoppingCartItem，以及加入购物车，得到购物车中书的总数量以及总价格三个函数。

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

尸体！-加入跨度的目的是为了定位- div id='cartstatus '您已经将span id='bookName'/span加入到购物车中，购物车中有span id='totalBookNumber'/span本书，总价格是span id=' total money '/span/div br br Java a href=' $ { page context。请求。上下文路径}/addToCart？id=javaprice=100 '加入购物车/a br Ajax a href=' $ { page context。请求。上下文路径}/addToCart？id=ajaxprice=200 '加入购物车/a br jquery a href=' $ { page context。请求。上下文路径}/addToCart？id=jqueryprice=300 '加入购物车/a br /body！-$ {页面上下文。请求。上下文路径}获取该项目的绝对路径- 3:addToCart - servlet的设计

步骤如下：

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

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

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

4):想创建交互式、快速动态网页应用的网页开发技术传递Json对象，该对象包括： { ' bookName ' ' : '总书号'，' totalMoney' }，若从服务器端返回json对象，则属性名必须使用双引号！

5):响应json请求，response.getWriter().印刷(JSON)；

公共类AddToCartServlet扩展了httpersvlet { public void doGet(httpersvrequest请求，HttpServletResponse响应)抛出ServletException，IOException { this。dopost(请求、响应)；} public void DoPost(httpersvletrequest请求，HttpServletResponse响应)引发ServletException，IOException { //1:获取请求参数id(bookName)，价格字符串bookName=请求。getParameter(' id ')；int price=整数。parseint(请求。getparameter(' price ')；//2:获取购物车对象，在会议中购物车sc=(购物车)请求。getsession().getAttribute(' sc ')；if(sc==null){ sc=新购物车()；request.getSession().setAttribute('sc '，sc)；} //3;将点击的对象加入到购物车中sc.addToCart(bookName，price)；//4:准备响应的Json对象： { ' bookName ' ' : '总书号'，' totalMoney' } //若从服务器端返回json对象，则属性名必须使用双引号！StringBuilder sBuilder=new StringBuilder()；sBuilder.append('{ ').追加(' \ ' bookName \ ' : \ ' ' bookName ' \ ').追加(',')。追加(“\”TotalBookNumber“: \”sc。gettotalbooknumber()' \ ').追加(',')。追加(“\”TotalMoney“: \”sc。GettotalMoney()' \ ').追加("}");//响应json请求回应。setcontenttype(' text/JavaScript ')；response.getWriter().打印(sbuilder。tostring())；} }上述中的用StringBuilder来拼接JSON字符串的方式可以借助第三方开源杰克逊来简化实现：String jsonStr=nullobject mapper对象映射器=new对象映射器()；jsonStr=objectmapper。writevalueasstring(sc)；4:ajax接受从服务器传来的参数{“‘bookName’:‘总书号’‘总钱’}

步骤：

1):为加入购物车这个超链接增加单击响应函数，并取消默认行为（返回假)

2):通过HTTP GET请求载入JSON数据。$.getJSON(网址，[数据]、[回调])

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

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

头！-$ {页面上下文。请求。上下文路径}获取该项目的绝对路径-脚本类型=' text/JAVAScript ' src=' http : $ { page context。请求。上下文路径}/scripts/jquery-1。7 .2 .js /脚本脚本类型=' text/JavaScript ' $(function(){ var ishscart=' $ { session scope。sc==null } '；if(is scart==' true '){ $(' #购物车状态').hide()；//隐藏显示的元素}else{ $('#cartstatus ').show()；//显示隐藏的匹配元素$('#bookName ').文本(' $ {会话范围。即book name } ')；$('#totalBookNumber ').文本(' $ {会话范围。即totalbooknumber } ')；$('#totalMoney ').文本(' $ {会话范围。即总货币} ')；} $('a ').单击(函数(){ $('#cartstatus ')).show()；var URL=this.href//url属性var agrs={ ' time ' : new Date()}；//时间戳$.getJSON(url，agrs，函数(数据){ $('#bookName ').文本(数据。book name)；$('#totalBookNumber ').文本(数据。totalbooknumber)；$('#totalMoney ').文本(数据。货币总额)；});返回false })；});/脚本/标题