• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax修改购物车示例

    1.购物车类的设计

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

    ShoppingCart:购物车封装类,items为 MapString, 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=javaprice=100">加入购物车/a> 
    br> 
    ajax 
    a 
    href="${pageContext.request.contextPath}/addToCart?id=ajaxprice=200">加入购物车/a> 
    br> 
    jquery 
    a 
    href="${pageContext.request.contextPath}/addToCart?id=jqueryprice=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>
    您可能感兴趣的文章:
    • 使用Ajax、json实现京东购物车结算界面的数据交互实例
    • 使用Python的Django框架结合jQuery实现AJAX购物车页面
    • 简单的前端js+ajax 购物车框架(入门篇)
    • PHP session实现购物车功能
    • php实现产品加入购物车功能(1)
    • php实现购物车功能(上)
    • php 购物车完整实现代码
    • php购物车实现代码
    • php 购物车的例子
    • Ajax + PHP session制作购物车
    上一篇:ajax请求post和get的区别以及get post的选择
    下一篇:Ajax使用JSON数据格式案例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax修改购物车示例 Ajax,修改,购物车,示例,Ajax,