码迷,mamicode.com
首页 > Web开发 > 详细

jquery ajax的几种方法

时间:2018-07-01 22:01:52      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:var   用户体验   jar包   web   void   opp   响应   value   购物车   

当我们需要局部刷新的时候,使用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的几种方法

标签:var   用户体验   jar包   web   void   opp   响应   value   购物车   

原文地址:https://www.cnblogs.com/wrkjwl/p/9251451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!