热门标签 | 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







推荐阅读
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • springmvc学习笔记(十):控制器业务方法中通过注解实现封装Javabean接收表单提交的数据
    本文介绍了在springmvc学习笔记系列的第十篇中,控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时,如何将其交给同一个控制器处理。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
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社区 版权所有