您的位置：首页 > 编程语言 > Java开发

springmvc和js前端的数据传递和接收方式(两种)

2017-12-22 10:34 716 查看

在springmvc中controller的结果集可通过json格式传到js前端接受，也可以通过Map传给前端，具体实现如下

1，通过json格式传递

controller层实现如下

@RequestMapping("queryCityInfo")
@ResponseBody
public String queryCityInfo()throws Exception{
String provinceId = getString("id");
@SuppressWarnings("rawtypes")
List cityList = personalService.queryCity(provinceId);
if(null != cityList && cityList.size() >0 ){
String json = JSONUtils.toJSONString(cityList);
super.outStr(json);
}
return null;
}
protected void outStr(String str)</span>
{
try
{
response.setCharacterEncoding("UTF-8");
response.getWriter().write(str);
}
catch (Exception e)
{
}
}
public static <T> String toJSONString(List<T> list)
{
JSONArray jsonArray = JSONArray.fromObject(list);
return jsonArray.toString();
}

js端接受如下

function selectBankCity(id){
$.ajax({
url:baseAddress+"queryCityInfo.do?provinceId="+id,
type:'get',
dataType:'json',
success:function(data){
$('#custBankArea').empty();
$('#custBankArea').append("<option >--请选择城市信息--</option>");
for(var i=0;i<data.length;i++){
$('#custBankArea').append("<option value='"+data[i].id+"'>"+data[i].cityName+"</option>");
}
}
});
}

2，通过Map传递

controller层实现如下

@RequestMapping("queryProvince")
@ResponseBody
public Map<String, Object> queryProvince(HttpServletRequest request,HttpServletResponse response){
Map<String, Object> map = new HashMap<String, Object>();
try {
@SuppressWarnings("rawtypes")
List provinceList = personalService.queryProvince();
if(null != provinceList && provinceList.size() >0 ){
map.put("province", provinceList);
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}

js端接受如下

$.ajax({
url:baseAddress+"queryProvince.do",
type:"get",
success:function(resData){
var data = resData.province;
for(var i=0;i<data.length;i++){
//js实现
//var objs = document.getElementById("cusBankCity")
//objs.options.add(new Option(data[i].provinceName) ,data[i].id);
//jq实现
$("#cusBankCity").append("<option value='"+data[i].id+"'>"+data[i].provinceName+"</option>");
}
}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： springmvc 前端数据

相关文章推荐

新的分享

章节导航