首页 > 技术文章 > Ajax案例:简易的购书网页

lxnlxn 2016-09-10 13:15 原文

****使用Ajax可以不需要刷新整个页面,而使局部页面更新的技术;

****JSON是JavaScript得原生格式,JavaScript中处理JSON数据不需要特殊的工具或架包,其规则很简单,对象就是一个为序的“名称/值”对的集合,但是在servlet类中书写时比较麻烦。

       所以导入Jackson的两个开源架包:jackson-core-asl-1.9.11.jar,jackson-mapper-asl-1.9.11.jar;其中有个类ObjectMapper,可以简化JSON在servlet类中书写的繁琐;

ObjectMapper mapper=new ObjectMapper();
String result=mapper.writeValueAsString(sc);

 

建立一个ShoppingCarItam类,封装了书的一些属性:如bookName,bookNum,price;

package com.lanqiao.javaweb.beans;

public class ShoppingCarItam {
    private int bookNum;//书的个数
    private String bookName;//书的名字
    private double price;
    
    public ShoppingCarItam() {
        super();
        // TODO Auto-generated constructor stub
    }

    public ShoppingCarItam(int bookNum, String bookName, double price) {
        super();
        this.bookNum = bookNum;
        this.bookName = bookName;
        this.price = price;
    }

    public int getBookNum() {
        return bookNum;
    }

    public void setBookNum(int bookNum) {
        this.bookNum = bookNum;
    }

    public String getBookName() {
        return bookName;
    }

    public void setBookName(String bookName) {
        this.bookName = bookName;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "ShoppingCarItam [bookNum=" + bookNum + ", bookName=" + bookName + ", price=" + price + "]";
    }
    
    
}

 

建一个ShoppingCart类,里面有一些常用方法,添加书的数目,书名,数的价格的方法addToCart()...,尤其有三个get方法,便于ObjectMapper类获取,其方法名和值;将其放在map集合中,string为书名;

package com.lanqiao.javaweb.beans;

import java.util.HashMap;
import java.util.Map;

public class ShoppingCart {
    //存放shoppingcaritem的map:键:书名,值:shoppingcatitem对象
    private Map<String, ShoppingCarItam> items=new HashMap<String,ShoppingCarItam>();
    
    private String bookName;
    
    ShoppingCarItam item=null;
    public void addToCart(String bookName,double price){
        this.bookName=bookName;
        //如果集合中已经有该书了,获取其书名,直接将其数量加1
        if(items.containsKey(bookName)){
            item=items.get(bookName);
            item.setBookNum(item.getBookNum() +1);
            
        }
        else{
            //如果集合中没有该书,设置该书的书名,价格,数量加1;
            item=new ShoppingCarItam();
            
            item.setBookName(bookName);
            item.setPrice(price);
            item.setBookNum(1);
            items.put(bookName, item);
        }
    }
    
    //获取书的总数量
    public int getTotalBookNum(){
        int total=0;
        for(ShoppingCarItam item1:items.values()){
            total+=item1.getBookNum();
        }
        return total;
    }
    //获取书名
    public String getBookName() {
        return bookName;
    }
    
    //总的价格
    public double getTotalMoney(){
        double money=0.0;
        for(ShoppingCarItam item2:items.values()){
            money+=item2.getPrice()*item2.getBookNum();
        }
        return money;
    }
}

 

建立一个Servlet类:AddToCartServlet,可以获取index.jsp中的书名id,price,然后调用ShoppingCart类中的方法,得出中的书的数量,总的金额,通过ObjectMapper类,获取ShoppingCart类中的get方法,并获取该方法的值。。。

package com.lanqiao.javaweb.beans;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.codehaus.jackson.map.ObjectMapper;

public class AddToCartServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求的参数id(bookName),price
        String bookName=request.getParameter("id");
        double price=Double.parseDouble(request.getParameter("price"));
        
        //获取购物车对象
        HttpSession session=request.getSession();
        ShoppingCart sc=(ShoppingCart)session.getAttribute("sc");
        
        if (sc==null) {
            sc=new ShoppingCart();
            session.setAttribute("sc", sc);
        }
        
        //把点击选项加入购物车
        sc.addToCart(bookName, price);
        
        //准备相应的JSON对象
//        StringBuilder result=new StringBuilder();
//        result.append("{")
//              .append("\"bookName\":\""+bookName+"\"")
//              .append(",")
//              .append("\"totalBookNum\":\""+sc.getTotalBookNum()+"\"")
//              .append(",")
//              .append("\"totalMoney\":\""+sc.getTotalMoney()+"\"")
//              .append("}");
        
        //导入Jackson的两个开源架包,可以简化JSON代码,如上为JSON 的代码,比较繁琐
        //ObjectMapper类可以获取get方法的方法名和其返回值,以名称/值,对的方式输出;
        ObjectMapper mapper=new ObjectMapper();
        String result=mapper.writeValueAsString(sc);
        System.out.println(result);
        
        //响应JSON对象
        response.setContentType("text/javascript");
        response.getWriter().print(result);
        //response.getWriter().println(result.toString());
    }

}

 

index.jsp页面:使用了Ajax的$.getJSON

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        //隐藏div
        var isHasCart="${sessionScope.sc==null}";
        //alert(isHasCart);
        if (isHasCart=="true") {
            $("#cart").hide();
        }else{
            $("#cart").show();
            $("#bookName").text("${sessionScope.sc.bookName}");
            $("#totalBookNum").text("${sessionScope.sc.totalBookNum}");
            $("#totalMoney").text("${sessionScope.sc.totalMoney}");
        }
        //未点击时div是隐藏的
        $("a").click(function() {
            //未点击时div是隐藏的
            $("#cart").show();
            
      //获取url地址 var url
=this.href;
      //时间拽,阻止缓存 var args
={"time":new Date()};
        //getJSON方法 $.getJSON(url,args,function(data){ $(
"#bookName").text(data.bookName); $("#totalBookNum").text(data.totalBookNum); $("#totalMoney").text(data.totalMoney); }); return false; }); }) </script> </head> <body> <div id="cart"> 您已经将&nbsp;<span id="bookName"></span>&nbsp;加入购物车 购物车中有&nbsp;<span id="totalBookNum"></span>&nbsp;本书 总价格为&nbsp;<span id="totalMoney"></span>&nbsp; </div> <br><br> <!--pageContext.request.contextPath为绝对路径,相对而言较为安全 --> java&nbsp;&nbsp;<a href="${pageContext.request.contextPath }/addToCart?id=java&price=200">加入购物车</a> <br><br> Oracle&nbsp;&nbsp;<a href="${pageContext.request.contextPath }/addToCart?id=Oracle&price=150">加入购物车</a> <br><br> Structs2&nbsp;&nbsp;<a href="${pageContext.request.contextPath }/addToCart?id=Structs2&price=100">加入购物车</a> <br><br> </body> </html>

 

lib下的web.xml文件

<servlet>
<description></description>
<display-name>AddToCart</display-name>
<servlet-name>AddToCart</servlet-name>
<servlet-class>com.lanqiao.javaweb.beans.AddToCartServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AddToCart</servlet-name>
<url-pattern>/addToCart</url-pattern>
</servlet-mapping>

 

推荐阅读