ajax请求返回map,前端获取结果
因业务需求,今天需要ajax请求的时候从后端返回⼀个map,但是问题是怎么在前端取值,这个以前遇到过,以为会⽐较简单,但是百度很多答案都不完整,导致没有办法借鉴。这⾥做下记录
后端代码:
@RequestMapping(value="/getCityByLevel.action", method = RequestMethod.POST)
public @ResponseBody Object getCityByLevel() {
//查询⼀线城市
List<RhCityDto> cityInfo = rhCityService.listCityByLevel("");
List<RhCityDto> cityInfo1 = new ArrayList<RhCityDto>();
List<RhCityDto> cityInfo2 = new ArrayList<RhCityDto>();
for(RhCityDto info :cityInfo){
if(CITY_LEVEL_ONE.Level())){
cityInfo1.add(info);
}else{
cityInfo2.add(info);
}
}
HashMap<String, Object> map = new HashMap<>();
map.put("cityInfo1",cityInfo1);
map.put("cityInfo2",cityInfo2);
return map;
}
可以看到上⾯的代码返回的是Map<String,List<Object>>,注意使⽤了@ResponseBody注解
前端请求和处理代码:
function initCity(){
var json = {
};
$.ajax({
type: "POST",
url: "../bireport/getCityByLevel.action",
contentType : "application/json",
dataType:"json",
data: JSON.stringify(json),
success: function(resp){
/
/这⾥的cityInfo1是后端map的key
var aa = resp["cityInfo1"];
var firstCity ="";
for(var city in aa){
firstCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
}
aa = resp["cityInfo2"];
var secondCity ="";
for(var city in aa){
secondCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
}
$("#firstCity").html(firstCity);
$('#firstCity').selectpicker("refresh");
$("#secondCity").html(secondCity);
$('#secondCity').selectpicker("refresh");
},
error:function(resp){
$.messager.alert('出错了','系统出错,请联系管理员。','error');
}
});
}
上⾯的 dataType声明为"json"
注意点:
1前端发送ajax请求时 dataType⼀定声明为"json"
ajax请求dataType值为json,jquery就会把后端返回的字符串尝试通过JSON.parse()尝试解析为js对象。所以如果你不将dataType设置为json,可以这样⾃⼰⽤json解析,如下:
function initCity(){
var json = {
js获取json的key和value};
$.ajax({
type: "POST",
url: "../bireport/getCityByLevel.action",
contentType : "application/json",
dataType:"text",
data: JSON.stringify(json),
success: function(resp){
//⾃⼰进⾏json解析也可以
resp = JSON.parse(resp);
var aa = resp["cityInfo1"];
var firstCity ="";
for(var city in aa){
firstCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
}
aa = resp["cityInfo2"];
var secondCity ="";
for(var city in aa){
secondCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
}
$("#firstCity").html(firstCity);
$('#firstCity').selectpicker("refresh");
$("#secondCity").html(secondCity);
$('#secondCity').selectpicker("refresh");
},
error:function(resp){
$.messager.alert('出错了','系统出错,请联系管理员。','error');
}
});
}
预期服务器返回的数据类型。如果不指定,jQuery 将⾃动根据 HTTP 包 MIME 信息来智能判断,⽐如 XML MIME 类型就被识别
为 XML。在 1.4 中,JSON 就会⽣成⼀个 JavaScript 对象,⽽ script 则会执⾏这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可⽤值:
·"xml": 返回 XML ⽂档,可⽤ jQuery 处理。
·"html": 返回纯⽂本 HTML 信息;包含的 script 标签会在插⼊ dom 时执⾏。
·"script": 返回纯⽂本 JavaScript 代码。不会⾃动缓存结果。除⾮设置了 "cache" 参数。注意:在远程请求时(不在同⼀个域下),所
有 POST 请求都将转为 GET 请求。(因为将使⽤ DOM 的 script标签来加载)
·"json": 返回 JSON 数据 。
·
"jsonp": JSONP 格式。使⽤ JSONP 形式调⽤函数时,如 "myurl?callback=?" jQuery 将⾃动替换 ? 为正确的函数名,以执⾏回调函数。
·"text": 返回纯⽂本字符串
2后台⽅法的声明需要使⽤@responseBody??
@responseBody注解的作⽤是将controller的⽅法返回的对象通过适当的转换器转换为指定的格式之后,写⼊到response对象的body 区,通常⽤来返回JSON数据或者是XML数据。
这个注解表⽰该⽅法的返回结果直接写⼊HTTP response body中,⼀般在异步获取数据时使⽤。
在使⽤@RequestMapping后,返回值通常解析为跳转路径。加上@responsebody后,返回结果直接写⼊HTTP response body中,不会被解析为跳转路径。⽐如异步请求,希望响应的结果是json数据,那么加上@responsebody后,就会直接返回json数据。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论