web开发-服务器Controller到前端中的数据传递

时间:2023-03-08 15:37:30
web开发-服务器Controller到前端中的数据传递

一, ajax方式

(一)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.