热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AJAX实现购物车的异步请求操作

大家在淘宝或者天猫上购物的时候,都会发现自己的购物车随着自己的点击而使页面出现一些变化。例如,当我们点击多选框是,左下方的总价就会发生改变。作为后台的管理者,我们同样需要对用户的购

        大家在淘宝或者天猫上购物的时候,都会发现自己的购物车随着自己的点击而使页面出现一些变化。例如,当我们点击多选框是,左下方的总价就会发生改变。作为后台的管理者,我们同样需要对用户的购物车清理(也就是用户购买购物车中的商品时)执行一些相应的业务逻辑操作。我选择的方式就是使用ajax的方式进行操作。

        首先我需要先对我的购物车进行一个简要的模拟。

&#64;RequestMapping("/shoppingCarInit")public String shoppingCarInit(HttpSession session){List goodsList &#61; new LinkedList();for(int i&#61;0;i<5;i&#43;&#43;){goodsList.add(i, new Goods("商品"&#43;(i&#43;1),10.4*(i&#43;1)));}session.setAttribute("goodsList", goodsList);return "ajax/shoppingAction";

之后跳转到我的jsp测试页面

那么我们可以随机选择几个商品进行测试了


当我们点击确认清算按钮时,我们可以从后台打印的信息中进行了解.

2
Goods [goodsName&#61;商品2, goodsPrice&#61;20.8]
Goods [goodsName&#61;商品4, goodsPrice&#61;41.6]
priceTotal----->62.400000000000006

我们可以看到,值确实传递到了后台.

ajax的js代码如下:

function sendInfo(){var goodsIndex &#61; document.getElementsByName("goodsIndex");var a &#61; 0;for(var i&#61;0;i

后台的接受代码如下;

&#64;RequestMapping("/doShoppingAction")
&#64;ResponseBody()
public void doShoppingAction(&#64;RequestBody(required&#61;false) StatusPOJO sp,HttpSession session,HttpServletResponse response) throws IOException{
Map map &#61;new HashMap();
if(session.getAttribute("tempMap")!&#61;null){
map&#61;(Map)session.getAttribute("tempMap");
};
if(sp.isStatus()){
System.out.println("这次添加进去的商品编号是:"&#43;sp.getIndex());
map.put(sp.getIndex(), ((List)session.getAttribute("goodsList")).get(sp.getIndex()));
}else{
if(map.get(sp.getIndex())!&#61;null){
System.out.println("这次删除的商品编号是:"&#43;sp.getIndex());
map.remove(sp.getIndex());
}
}
session.setAttribute("tempMap", map);
//response.getWriter().write("success");
}

要点解析:

1.首先我们要将选中的编号通过ajax的方式传递到后台,这个要怎样实现呢?

我们都会使用标签实现传入的链表的迭代,所以我们如果想要将选中的序号传递到后台(这个序号和后台传递过来的链表中的对应信息在链表中的位置是相同的.)&#xff0c;我们需要借助中的varStatus属性,定义很简单varStatus&#61;&#39;status&#39;;将我们复选框的value值设置成${status.index}.这个是从0开始的排序.然后就是将这个值通过js对象的方式传递到后台.这个地方我们需要使用一下字符串的拼接.

var param &#61; "{&#39;index&#39; : "&#43;index&#43;",&#39;status&#39;:"&#43;status&#43;"}";

这样我们就可以将我们想要传递的var变量信息传递到后台。然后我们需要设计一个POJO对象来接受我们的这两个参数的信息。

2.

关于这些传入后台的POJO信息,我们该怎样实现利用呢。在这个地方,我使用了一下session&#xff0c;创建了一个临时的map&#xff08;tempMap&#xff09;来存储需要购买的商品信息。那么这个地方我们又会遇到一个问题,为什么要用map呢。很简单&#xff0c;我们可能会修改我们的复选框的信息&#xff0c;这样有些信息就会重复添加&#xff0c;这显然不符合我们的要求。所以我选择了map来存储。至于为什么将他们存储到session,这也很简单。这个map需要在不同的路径间进行跳转.所以我才使用了map。

相关的全部代码我都打包到了一个压缩包里,大家可以查看部署测试

https://pan.baidu.com/s/1jIU2FFC







推荐阅读
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项,包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法,如下载缺失的msvcr110.dll文件等。通过本文的指导,读者可以轻松地在Windows系统下配置PHP5.6,并解决一些常见的配置问题。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • springmvc学习笔记(十):控制器业务方法中通过注解实现封装Javabean接收表单提交的数据
    本文介绍了在springmvc学习笔记系列的第十篇中,控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时,如何将其交给同一个控制器处理。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
author-avatar
手机用户2502908327
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有