ssm项目用ajax进行前后端交互的一些总结

首先，我讲讲我对ajax技术的一些认识：ajax技术即为了让页面实现局部的刷新，而不是每次都是表单提交到后台 后台再进行页面的跳转。
下面，我将演示用jQuery的ajax方法提交数据到后台，及后台获取这些参数的方式，
传单个参数时：
js中只需要3个属性就可以完成
后台的controller层也只需要让接收方法的形参与data中参数名相等，即可以收到前台内容

$.ajax({
		url:"/项目名/order/initsupr",//提交地址
		data:{afterId:beforId}//需要传给后台的参数（后台获取时需要的键:前台内容）
		success:function(data) {//成功时返回值在data中}
		error:function(data) {//成功时返回值在data中}
		}）

后台获取的方式：

//1、直接让方法形参名与前端传入参数名相同，当然不同时才用@ModelAttribute()给获取前端相应的参数
	@RequestMapping(value="/goodsListBy",method=RequestMethod.POST)
	@ResponseBody
	public List<Goods> goodsListBySuprid(@ModelAttribute("sid")int sid) {
		List<Goods> list=goodsService.goodsListBySuprid(sid);
		return list;
	}
//2、用以前的老办法了，直接用内置对象
	@RequestMapping(value="/goodsListBy",method=RequestMethod.POST)
	@ResponseBody
	public List<Goods>goodsListBySuprid(HttpServletRequest request,HttpServletResponse response) {
		int sid=request.getParameter("sid");
		List<Goods> list=goodsService.goodsListBySuprid(sid);
		return list;
	}
//3、用@RequestParam获取

传整个表单内容时：
前台js代码：
当传整个表单内容时，后台controller层肯定不会去一个个获取前台传入内容，肯定是封装一个对象接收前台传入数据，前台就需要以json类型的方式传入后台，具体实现用代码更易懂：

$.ajax({
		url:"/slms/order/addOrder",//提交地址
		type:"POST",//传入后台肯定是POST
		contentType : 'application/json;charset=utf-8', //设置请求头信息，很重要，这里写了后台才能使用@RequestBody注解
//		contentType : 'application/x-www-form-urlecoded',//当后端只是获取单个参数时，要写成这种格式才有效（当然这种是默认格式）
		 dataType:"json",//数据类型是json
		 data:JSON.stringify({将Json对象序列化成Json字符串，JSON.stringify()原生态方法
			 orderDate:orderDate,//后端取值参数名：前端内容
			 supId:supId,
			 remark:remark,
			 code:tradeNo(),
			 orderDetails:orderDetails
		 }),    
		 success: function(status){//data为成功的返回数据
             alert(status);
         },
         error: function(xhr){
             //alert(xhr.status);
         }
	})

当存在主表中有多个子表时：
后端需要把子表类装入List集合中，设置成主表类的一个属性。
前端类似，需要把子表内容封装成一个数组（js中数组定义：var arr=[ ]）然后遍历子表，一个个push() 进数组中，封装成一个整体
如上面代码中的orderDetails属性：用如下方法即把他封装好了：用他把他看成整体即可

var orderDetails=[];//用于装多个商品详情
	for(var i=0;i<$('input[name=goodsId]').length;i++){
		orderDetails.push({
			"goodsId":$('input[name=goodsId]')[i].value,//依次加入第i行的商品
			"num":$('input[name=num]')[i].value
		})
	}

传整个表单内容时：
后台controller层代码：
我们都知道request与进行HTTP通信时的提交请求相关，response与服务器的响应相关：
因此代码中的@RequestMapping和@RequestBody都是与前端请求有关的注解，而@ResponseBody则与后台响应有关

@RequestMapping：给前端一个提交的映射地址，相当于servlet的名字，也就是通过它来指定控制器可以处理哪些URL请求， 可以在方法和类的声明中使用，这里面有很多的参数。

@RequestParam：用来处理Content-Type为application/x-www-form-urlencoded（默认类型如果不指定），使用value属性可以指定获取参数的key。

@RequestBody：注解一般用来处理非Content-Type: application/x-www-form-urlencoded编码格式的数据，在GET请求中没有请求体所以一般不适用，在post请求中必须指定Content-Type后才能使用它，如ajax请求指定发送格式为application/json。

@ResponseBody：可以标注方法也可以标注类，当标注方法时表示该方法的返回值会被解析成json（字符串会不会被转换），直接写入HTTP Response Body中，视图处理器将不会将return的参数识别成路径。当它标注类时，类中所有方法的返回值都将直接返回值到页面，相当于给所有的方法都加上@ResponseBody注解；一般进行Ajax交互需要写此注解。

	@RequestMapping(value="addOrder",method=RequestMethod.POST)
	@ResponseBody
	public String addOrder(@RequestBody OrderDetailVo orderDetailVo){//传入的多个参数被封装成json格式，这里用的一个对象接收，对象的属性与前端json的键名称相对应即可接收
		int a=this.orderService.addOrder(orderDetailVo);
		if(a>0){
			return "aa";
		}
		return null;
	}

1.@RequestBody的作用

注解用于将Controller的方法参数，根据HTTP Request Header的content-Type的内容,通过适当的HttpMessageConverter转换为JAVA类

使用场景是：POST或者PUT的数据是JSON格式或者XML格式,而不是普通的键值对形式.

application/x-www-form-urlencoded通过表单提交，在sevlet实现中，mutipart/form-data和application/x-www-form-urlencoded会被特殊处理，请求参数将被放置于request.paramter，这是一个map。

当我们使用content-type=application/json且后台使用@RequestBody，则无法再从request.paramter中获取请求数据。