当我们需要局部刷新的时候,使用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 ????????????});
jquery ajax的几种方法
原文地址:https://www.cnblogs.com/wrkjwl/p/9251451.html