web开发-服务器Controller到前端中的数据传递
2016-04-19 13:15
751 查看
一, ajax方式
(一)controller中
1. 定义AjaxResponse类 成员有: status , message, data. 其中 status是成功或失败状态, message是给出的相关信息, data是传递过来的数据
2. 定义返回AjaxResponse对象的controller:
一个实例:
3. 在js中接收controller中返回的AjaxResponse 对象
一个实例:
-------补充知识:----------
简单的说Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readyState):
0-未初始化
1-正在初始化
2-发送数据
3-正在发送数据
4-完成
当XMLHttpRequest.readyState为4时,表示请求已经完成可以得到响应结果。当然success和error方法还是根据响应状态码来触发。当XMLHttpRequest.status为200的时候,表示响应成功,此时触发success().其他状态码则触发error().
Jquery的$.ajax()函数只是封装了ajax请求,本质上还是通过JS XMLHttpRequest内置对象来处理的。 )
----------------------------------------------
二, 在controller中的@RequestMapping方法中通过参数Model 来传递数据
三, 在controller中的@RequestMapping方法中通过返回值Map来传递数据
四, 在controller中通过ModelAndView 来传递参数,
一个实例:
其中, ModelAndView mav = new ModelAndView("opPage/jn/signUp/tour_visitor_list"); 设置返回的页面. mav.addObject("xxx",XXX); 设置传递的数值.
此传递的数值在freemark中渲染, 不需要@responseBody.
(一)controller中
1. 定义AjaxResponse类 成员有: status , message, data. 其中 status是成功或失败状态, message是给出的相关信息, data是传递过来的数据
2. 定义返回AjaxResponse对象的controller:
一个实例:
@RequestMapping("createOrder") @ResponseBody public AjaxResponse createOrder(String subData, String travellerDetail) { AjaxResponse response = new AjaxResponse(); response.setStatus(AjaxResponseStatus.FAILED); //先设置状态为失败 String operatorName = getOperator().getOperatorName(); DisneyOrderCreateVo vo = JSON.parseObject(subData, DisneyOrderCreateVo.class); vo.setOperator(operatorName); List<TravellerDetail> travellerDetails = new ArrayList<TravellerDetail>(); travellerDetails = JSON.parseArray(travellerDetail, TravellerDetail.class); try { orderService.createDsnOrder(vo, travellerDetails); } catch (Exception e) { logger.debug(e.getMessage(), e); response.setMessage(e.getMessage()); // 将失败信息返回到页面 return response; } response.setStatus(AjaxResponseStatus.SUCCESS); // 将状态设置为成功 return response; }
3. 在js中接收controller中返回的AjaxResponse 对象
一个实例:
$.ajax({ url : basepath + "/disney/order/createOrder", method : 'POST', data : {"subData":JSON.stringify(subData) , "travellerDetail":JSON.stringify(travellerDetail)}, //将对象序列化为json对象 dataType : "json", //预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断 success:function(res){ // 成功后进行的操作 返回200 if(res && res.status==="SUCCESS"){ createOrderPopwin.close(); window.location.href=basepath+"/disney/order/orderList"; }else if(res && res.status === "FAILED"){ var errorMsg = res.message; alert(errorMsg); } }, error:function(res){ } //失败后进行的操作 除200外的返回状态都执行error });
-------补充知识:----------
简单的说Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readyState):
0-未初始化
1-正在初始化
2-发送数据
3-正在发送数据
4-完成
当XMLHttpRequest.readyState为4时,表示请求已经完成可以得到响应结果。当然success和error方法还是根据响应状态码来触发。当XMLHttpRequest.status为200的时候,表示响应成功,此时触发success().其他状态码则触发error().
Jquery的$.ajax()函数只是封装了ajax请求,本质上还是通过JS XMLHttpRequest内置对象来处理的。 )
----------------------------------------------
二, 在controller中的@RequestMapping方法中通过参数Model 来传递数据
三, 在controller中的@RequestMapping方法中通过返回值Map来传递数据
四, 在controller中通过ModelAndView 来传递参数,
一个实例:
@RequestMapping("/tourVisitorList") public ModelAndView tourVisitorList(@RequestParam(required = true) String tourGroupMark) { tourGroupMark = StringUtils.trimToNull(tourGroupMark); ModelAndView mav = new ModelAndView("opPage/jn/signUp/tour_visitor_list"); tourGroupMark = StringUtils.trimToNull(tourGroupMark); Map<String, Object> idSaleMap = new HashMap<>(); Map<String, Object> idCusMap = new HashMap<>(); mav.addObject("idSaleMap", idSaleMap); mav.addObject("idCusMap", idCusMap); return mav; }
其中, ModelAndView mav = new ModelAndView("opPage/jn/signUp/tour_visitor_list"); 设置返回的页面. mav.addObject("xxx",XXX); 设置传递的数值.
此传递的数值在freemark中渲染, 不需要@responseBody.
相关文章推荐
- js 函数定义三种方式
- [RFC1867] HTML中基于表单的文件上传
- CSS3实现32种基本图形
- css的div垂直居中的方法,百分比div垂直居中 2014年11月16日 19922次浏览 前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的d
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- 利用原生JavaScript获取样式的方式小结
- gulp使用技巧-删除node_modules文件夹,解决目录层次太深删除报错的问题
- JS Date parse
- Javascript 面向对象编程:(1)封装;(2)构造函数的继承;(3)非构造函数的继承
- js和jquery中ajax使用
- JavaScript prototype
- HTML加载顺序总结测试
- JSP学习
- 用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单
- 提高CSS开发能力的技巧集
- A first chance exception of type 'System.NullReferenceException' occurred发生的时候你确实是遇到了Bug
- 原生JS实现的简单“瀑布流”布局
- HTML5 在canvas中绘制复杂形状
- 四,细说 HTML5 之 新增的非主题结构元素
- JavaScript之爱的初见