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







推荐阅读
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 在Laravel中实现PHP对JSON数据的发布与处理 ... [详细]
  • Sanic 是一个类似于 Flask 的 Python 3.5 Web 服务器,以其出色的写入速度而著称。与 Flask 不同,Sanic 支持异步请求处理,这使得它在处理高并发请求时表现更加出色。通过利用 Python 的异步特性,Sanic 能够显著提高应用程序的性能和响应能力,适用于构建高性能的异步 Web 应用。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • Java Web开发中的JSP:三大指令、九大隐式对象与动作标签详解
    在Java Web开发中,JSP(Java Server Pages)是一种重要的技术,用于构建动态网页。本文详细介绍了JSP的三大指令、九大隐式对象以及动作标签。三大指令包括页面指令、包含指令和标签库指令,它们分别用于设置页面属性、引入其他文件和定义自定义标签。九大隐式对象则涵盖了请求、响应、会话、应用上下文等关键组件,为开发者提供了便捷的操作接口。动作标签则通过预定义的动作来简化页面逻辑,提高开发效率。这些内容对于理解和掌握JSP技术具有重要意义。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • 在深入研究 React 项目的过程中,特别是在探索 react-router 源码时,我发现了其中蕴含的中间件概念。这激发了我对中间件的进一步思考与整理。本文将详细探讨 Redux 中间件的原理及其在实际项目中的应用,帮助读者更好地理解和使用这一强大工具。通过具体示例和代码解析,我们将揭示中间件如何提升应用的状态管理和异步操作处理能力。 ... [详细]
  • 设计实战 | 10个Kotlin项目深度解析:首页模块开发详解
    设计实战 | 10个Kotlin项目深度解析:首页模块开发详解 ... [详细]
  • 在ASP.NET中,实现页面间数据传递有多种技术方案。其中一种常见方法是通过URL链接地址传递参数,例如在 `send.aspx` 页面中,可以通过点击按钮将数据附加到URL中,然后在目标页面 `receive.aspx` 中解析这些参数。此外,还可以利用Session、ViewState、Cookie等机制来实现跨页面的数据共享,每种方法都有其适用场景和优缺点。 ... [详细]
  • 本文全面解析了 gRPC 的基础知识与高级应用,从 helloworld.proto 文件入手,详细阐述了如何定义服务接口。例如,`Greeter` 服务中的 `SayHello` 方法,该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码,读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]
  • 本文详细探讨了Zebra路由软件中的线程机制及其实际应用。通过对Zebra线程模型的深入分析,揭示了其在高效处理网络路由任务中的关键作用。文章还介绍了线程同步与通信机制,以及如何通过优化线程管理提升系统性能。此外,结合具体应用场景,展示了Zebra线程机制在复杂网络环境下的优势和灵活性。 ... [详细]
  • 深入解析JavaScript中的函数防抖与节流技术及其应用场景
    本文深入探讨了JavaScript中函数防抖和节流技术的原理及应用场景。通过详细的示例代码,全面解析了这两种优化方法在实际开发中的重要作用,为开发者提供了宝贵的参考和实践指导。 ... [详细]
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社区 版权所有