SpringMVC如何使用ajax进行前后台交互(包含后台如何传递多个json给前台ajax)

知识点一：当要从前端传递ajax数据给后台Controller时，两种情况：

一.ajax基于form表单提交:

//JS代码
function fun(){
	var last;
	$.ajax({
		type:"post",
		dataType:"json",
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		url:"/ticketWeb/hotel/toHotelList.do",
		//关键语句：$('#myform').serialize()获得form表单的id，然后使用serialize()将其转为json格式。
		data:$('#chooseLocationForm').serialize(),
		success:function (result){
			//JQuery页面跳转
			result=JSON.stringify(result);
			//alert(result);
			window.location.replace("/ticketWeb/toJSP/jsp/hotel/hotelList.jsp"+"?hotellist="+result);
		},
		error:function(){
			alert("ERROR");
		}
	})
}

如果此时想要在ajax回显的时候不回到本页面，而是跳转到另一个新页面，则此时使用window.location.replace("/ticketWeb/toJSP/jsp/hotel/hotelList.jsp"+"?hotellist="+result);进行另一个页面跳转（result此时已经被转成json格式了）。

当跳转到另一个页面时，如何获取前一个页面的ajax的值呢（获取到的是json格式的代码）？此时使用下面代码

window.onload=interBegin;
var b="";
function interBegin(){
	var last="";
	var hotellist;
	var url=window.location.search;
	if(url.indexOf("?")!=-1){
		hotellist = url.substr(url.indexOf("=")+1);
		//对另一个页面传递过来的参数进行解码，变成正确的语言。
		hotellist=decodeURI(hotellist);
		//将字符串转成json格式的字符串
		var a=JSON.stringify(hotellist);
		//将json格式的字符串转成json对象
		var b=$.parseJSON(a);
		//使用jquery将json数组获取出来
		b=$.each(eval("(" + b+ ")"), function (i, n) {
			last='<ul>'+'<li><a href=/ticketWeb/hotel/toHotelDetail.do?hotelid='+n.hotelid+'&hotelname='+n.hotelname+'>'+n.hotelname+'</a></li>'+
			'<li>'+n.hoteladdress+'</li>'+'<li>'+n.hoteltype+'</li>'+
			'<li>'+n.hotelstyle+'</li>'+'<li>'+n.hotelprice+'</li>'+
			'<li>'+n.surplusnum+'</li>'+'<li>'+n.location+'</li>'+'</ul>'+last;
		});
		//$("#hotel_list").after(last);
		$("#hotel_list").html(last);
	}
}

解析出url中传递过来的参数（使用decodeURI()方法），然后将其从字符串转成JSON数组（先用stringify()方法将字符串变成JSON格式的字符串，再使用parseJSON()方法将其转为json数组对象），最后，一定要使用eval函数将其变成正确格式的json数组，最后按照ajax处理json的正常处理方式，将其输出成html就可以了。

 

二.直接用ajax传递数据。

function ajaxSubmit(){
	var last="";
	$.ajax({
		type:"post",
		dataType:'text',
		url:"/ticketWeb/hotel/commentStar.do",
		//关键语句：$('#myform').serialize()获得form表单的id，然后使用serialize()将其转为json格式。
		data:{
			star:$('#star').val()
		},
		success:function (result){
			alert(result);
		},
		error:function(){
			alert("ERROR");
		}
	})
}

直接在data中设置变量star,这样就可在springMVC后台按照正常的方式获取值了。（同form表单提交的name属性是一个意思）

 

知识点二：大家可能会遇到一种情况，比如使用springMVC的controller在数据返回到ajax时，如果包含了多个不同的数据集合，要如何用JSON返回到前端ajax，并且正确接收。

此时，在后台的controller里面，无法用一个简单的JsonArray来接收多个集合，这时候就要用到Map集合，通过键值对的方式将数据存储。后台代码如下：

//获得门票的具体信息，以及评论信息
	@RequestMapping("toViewspotDetail")
	public  void toViewspotDetail(String viewspotname,String viewspotid,HttpServletResponse response) throws IOException{
		list=vs.selectByName(viewspotname);
		viewspot=vs.selectById(viewspotid);
		commentList=cs.selectByViewspotName(viewspotname);
		if(null!=list&&null!=viewspot){
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("viewspotlist", list);
		map.put("viewspot", viewspot);
		map.put("commentlist", commentList);
		JSONObject jsonObj=new JSONObject(map);
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(jsonObj);
		}
	}

当返回到前端时，要如何处理呢，这里我分为两个情况，第一种是在本页面获取这些数据集合，代码如下： 

​
function fun(viewspotname,viewspotid) {
	$.ajax({
		type:"get",
		dataType:'text',
		url:"/ticketWeb/viewspot/toViewspotDetail.do",
		//关键语句：$('#myform').serialize()获得form表单的id，然后使用serialize()将其转为json格式。
		data:{
			"viewspotname":viewspotname,
			"viewspotid":viewspotid
		},
		success:function (result){
			result=$.each(eval("(" + result+ ")"), function (i, n) {
              if(i=="viewspot"){
					var last;
					last='<h2>'+n.viewspotname+'</h2>';
					$("#detail").html(last);
				}
				if(i=="viewspotlist"){
					var last="";
					$.each(n, function (i, x){
						last='<tr>'+'<td><a href=/ticketWeb/viewspot/toOrderDetail.do?viewspotid='+x.viewspotid+'&viewspotname='+x.viewspotname+'>'+x.viewspotname+'</a></td>'+
						'<td>'+x.viewspotexplain+'</td>'+'<td>'+x.city+'</td>'+'<td>'+x.viewspotprice+'</td>'+
						'<td>'+x.surplusnum+'</td>'+'<td><input type=radio name=viewspotid value='+x.viewspotid+' ><input type=submit value=预定 ></td>'+'</tr>'+last;
						
					});
					$("#viewspotlist").after(last);
					
				}
});
			
		},
		error:function(){
			alert("ERROR");
		}
	})
}

​

上述代码通过eval()方法将result转换成json对象（并且此时的json对象是Map集合，因此可以被当做一个数组遍历），在通过$.each（）方法时，就可以将你所要的值遍历出来了。

 

第二种情况是跳转回ajax后，再次跳转到其他页面时，要如何处理这个Map集合的json对象呢，代码如下：

function fun(viewspotname,viewspotid) {
	$.ajax({
		type:"get",
		dataType:'text',
		url:"/ticketWeb/viewspot/toViewspotDetail.do",
		//关键语句：$('#myform').serialize()获得form表单的id，然后使用serialize()将其转为json格式。
		data:{
			"viewspotname":viewspotname,
			"viewspotid":viewspotid
		},
		success:function (result){
			result=eval("(" + result+ ")");
			result=JSON.stringify(result);
			window.location.replace("/ticketWeb/toJSP/jsp/viewspot/viewspotDetail.jsp"+"?result="+result);
			
		},
		error:function(){
			alert("ERROR");
		}
	})
}

这个是第一个页面（后台首先返回的ajax页面），首先将数据通过eval()方法将result转换成正确的json对象，再通过stringify()方法将result转换为json格式的字符串，然后转发到下一个页面，下一个页面的json代码，如下：

window.onload=interBegin;
function interBegin(){
	
	var result;
	var url=window.location.search;
	if(url.indexOf("?")!=-1){
		result = url.substr(url.indexOf("=")+1);
		//对另一个页面传递过来的参数进行解码，变成正确的语言。
		result=decodeURI(result);
		//将字符串转成json格式的字符串
		var a=JSON.stringify(result);
		//将json格式的字符串转成json对象
		var b=$.parseJSON(a);
		//使用jquery将json数组获取出来
		b=$.each(eval("(" + b+ ")"), function (i, n) {
				if(i=="viewspot"){
					var last;
					last='<h2>'+n.viewspotname+'</h2>';
					$("#detail").html(last);
				}
				if(i=="viewspotlist"){
					var last="";
					$.each(n, function (i, x){
						last='<tr>'+'<td><a href=/ticketWeb/viewspot/toOrderDetail.do?viewspotid='+x.viewspotid+'&viewspotname='+x.viewspotname+'>'+x.viewspotname+'</a></td>'+
						'<td>'+x.viewspotexplain+'</td>'+'<td>'+x.city+'</td>'+'<td>'+x.viewspotprice+'</td>'+
						'<td>'+x.surplusnum+'</td>'+'<td><input type=radio name=viewspotid value='+x.viewspotid+' ><input type=submit value=预定 ></td>'+'</tr>'+last;
						
					});
					$("#viewspotlist").after(last);
					
				}
				if(i=="commentlist"){
					
				}
			});
		//$("#hotel_list").after(last);
		//$("#hotel_list").html(last);
	}
}

同我最上面的描述一样，先将result正确提取出来，再通过$.each()的方法获取将map的值获取出来。