jquery ajax的几种方法

Posted 2020-11-21 掠过的岁月

当我们需要局部刷新的时候，使用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             });