首页 > 代码库 > Ajax案例：简易的购书网页

Ajax案例：简易的购书网页

2024-08-12 20:32:51   211人阅读

****使用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="http://www.mamicode.com/${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="http://www.mamicode.com/${pageContext.request.contextPath }/addToCart?id=java&price=200">加入购物车</a>    <br><br>        Oracle&nbsp;&nbsp;<a href="http://www.mamicode.com/${pageContext.request.contextPath }/addToCart?id=Oracle&price=150">加入购物车</a>    <br><br>        Structs2&nbsp;&nbsp;<a href="http://www.mamicode.com/${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>

 

Ajax案例：简易的购书网页


联系
我们