分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

jquery ajax的几种方法

发布时间:2023-09-06 02:02责任编辑:沈小雨关键词:暂无标签

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved