当我们需要局部刷新的时候，使用ajax可以更好的实现用户体验；
第一种方法，使用$.post，先申明url和请求参数，也是如下的args，如果没有请求参数，就不需要。
1 $(function(){ 2 var url="bookServlet"; 3 var idVal=$.trim(this.name); 4 var auantityVal=$.trim(this.value); 5 var args={"method":"updateItemQuantity","id":idVal,"quantity":auantityVal,"time":new Date()}; 6 $.post(url,args,function(data){ 7 var booknumber=data.bookNumber; 8 var totalMoney=data.totalMoney; 9 $("#totalMoney").text("总金额: ￥"+totalMoney); 10 $("#bookNumber").text("您的购物车中共有" +booknumber+" 本书"); 11 },"JSON"); 12 });
servlet后台代码
1 public void updateItemQuantity(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { 2 System.out.println(13); 3 String idStr=request.getParameter("id"); 4 String quantityStr=request.getParameter("quantity"); 5 ShoppingCart sc= BookStoreWebUtils.getShoppingCart(request); 6 int id=-1; 7 int quantity=-1; 8 try { 9 id=Integer.parseInt(idStr); 10 quantity=Integer.parseInt(quantityStr); 11 } catch (NumberFormatException e) { 12 e.printStackTrace(); 13 } 14 if(id>0&&quantity>0){ 15 bookService.updateItemQuantity(sc,id,quantity); 16 } 17 //传回json数据 18 Map<String,Object> result=new HashMap<String,Object>(); 19 result.put("bookNumber", sc.getBookNumber()); 20 result.put("totalMoney", sc.getTotalMoney()); 21 Gson gson=new Gson(); 22 String jsonStr=gson.toJson(result); 23 //使用 FastJson 插件，将 java对象 转为 json 格式的字符串 导入 FastJson 的jar包即可 24 //String userStr = JSON.toJSONString(users); 25 response.setContentType("text/javascript"); 26 response.getWriter().print(jsonStr); 27 // response.getWriter().write(jsonStr);//把数据以json的形式响应给页面 28 }
另一种方式 使用$.ajax,
1 $(function(){ 2 $.ajax({ 3 url:"bookServlet", 4 data:{"method":"updateItemQuantity","id":$.trim(this.name),"quantity":$.trim(this.value),"time":new Date()}, 5 type:"post", 6 dataType:"json", 7 success:function(data){ 8 var booknumber=data.bookNumber; 9 var totalMoney=data.totalMoney; 10 $("#totalMoney").text("总金额: ￥"+totalMoney); 11 $("#bookNumber").text("您的购物车中共有" +booknumber+" 本书"); 12 } 13 }); 14 });
