知识点一:当要从前端传递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的值获取出来。